a little padding does not hurt (#305)

* a little padding does not hurt * modal filter, dropdown sizes, search offset
gobitfly · May 16, 2024 · 3302625 · 3302625
1 parent f895ded
commit 3302625
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 20 deletions.
diff --git a/frontend/assets/css/prime.scss b/frontend/assets/css/prime.scss
@@ -394,6 +394,7 @@
 
   &.small {
     padding: var(--padding-small) var(--padding);
+    height: 30px;
   }
 
   &.table {

diff --git a/frontend/components/bc/ContentFilter.vue b/frontend/components/bc/ContentFilter.vue
@@ -45,7 +45,6 @@ const filter = ref<string>('')
       opacity: 0;
       padding: 0;
       position: absolute;
-      right: 100%;
       transition:
         width 0.2s ease-in-out,
         opacity 0.01s ease-in-out 0.19s,

diff --git a/frontend/components/bc/searchbar/SearchbarMain.vue b/frontend/components/bc/searchbar/SearchbarMain.vue
@@ -630,7 +630,7 @@ function informationIfHiddenResults () : string {
   margin: auto;
 
   &.embedded {
-    height: 30px;
+    height: 28px;
     &.dropdown-is-opened {
       @media (max-width: 510px) { // narrow window/screen
         position: absolute;
@@ -712,7 +712,7 @@ function informationIfHiddenResults () : string {
         }
       }
       &.embedded {
-        height: 30px;
+        height: 28px;
         padding-right: 31px;
       }
 
@@ -738,8 +738,8 @@ function informationIfHiddenResults () : string {
       &.embedded {
         right: -1px;
         top: -1px;
-        width: 32px;
-        height: 32px;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
       }
     }
   }

diff --git a/frontend/components/bc/table/TablePager.vue b/frontend/components/bc/table/TablePager.vue
@@ -134,13 +134,12 @@ watch(() => data.value.lastPage && data.value.lastPage < data.value.page, (match
 
 .bc-pageinator {
   position: relative;
-  width: calc(100% - var(--padding-large));
   height: 78px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-weight: var(--standard_text_medium_font_weight);
-  padding: var(--padding);
+  margin: var(--padding) var(--padding-large);
 
   .left-info {
     position: absolute;
@@ -149,7 +148,6 @@ watch(() => data.value.lastPage && data.value.lastPage < data.value.page, (match
     height: 100%;
     display: flex;
     align-items: center;
-    padding-left: var(--padding);
   }
 
   .right-info {
@@ -231,6 +229,7 @@ watch(() => data.value.lastPage && data.value.lastPage < data.value.page, (match
     .left-info {
       position: relative;
       height: unset;
+      padding-left: unset;
     }
   }
 }

diff --git a/frontend/components/dashboard/GroupManagementModal.vue b/frontend/components/dashboard/GroupManagementModal.vue
@@ -271,19 +271,15 @@ const selectedSort = computed(() => sortOrder.value ? `${sortField.value}:${getS
 }
 
 :global(.validator-group-managment-modal-container .bc-table-header) {
-  height: unset;
-  padding: var(--padding) 0;
+  height: unset !important;
+  padding: var(--padding) 0 !important;
   @include fonts.subtitle_text;
 }
 
 :global(.validator-group-managment-modal-container .bc-table-header .side:first-child) {
   display: contents;
 }
 
-:global(.validator-group-managment-modal-container .bc-pageinator .left-info) {
-  padding-left: var(--padding-large);
-}
-
 :global(.validator-group-managment-modal-container .edit-group) {
   max-width: 201px;
   height: 27px;

diff --git a/frontend/components/dashboard/ValidatorManagementModal.vue b/frontend/components/dashboard/ValidatorManagementModal.vue
@@ -426,19 +426,15 @@ const premiumLimit = computed(() => (total.value) >= maxValidatorsPerDashboard.v
 }
 
 :global(.validator-managment-modal-container .bc-table-header) {
-  height: unset;
-  padding: var(--padding) 0;
+  height: unset !important;
+  padding: var(--padding) 0 !important;
   @include fonts.subtitle_text;
 }
 
 :global(.validator-managment-modal-container .bc-table-header .side:first-child) {
   display: contents;
 }
 
-:global(.validator-managment-modal-container .bc-pageinator .left-info) {
-  padding-left: var(--padding-large);
-}
-
 .small-title {
   @include utils.truncate-text;
   @include fonts.big_text;