Fix navbar items height

hplush · Feb 19, 2024 · 5500c33 · 5500c33
1 parent 189dcd0
commit 5500c33
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 10 deletions.
diff --git a/web/main/common.css b/web/main/common.css
@@ -3,8 +3,8 @@
   --padding-l: 16px;
   --padding-xl: 24px;
   --base-font: 1rem/1.6 system-ui;
-  --control-font: bold 100%/1.6 system-ui;
-  --page-title-font: 140% serif;
-  --hotkey-font: bold 90%/1 system-ui;
+  --control-font: bold 1rem/1.6 system-ui;
+  --page-title-font: 1.4rem serif;
+  --hotkey-font: bold 0.9rem/1 system-ui;
   --radius: 8px;
 }
diff --git a/web/pages/feeds/categories.svelte b/web/pages/feeds/categories.svelte
@@ -17,7 +17,6 @@
   import CardLinks from '../../ui/card-links.svelte'
   import Card from '../../ui/card.svelte'
   import Loader from '../../ui/loader.svelte'
-  import Row from '../../ui/row.svelte'
   import TwoStepsPage from '../../ui/two-steps-page.svelte'
   import FeedsEdit from './edit.svelte'
 
@@ -45,7 +44,7 @@
             {:else if category.id === 'broken'}
               <h2 class="feeds-categories_title">{$common.brokenCategory}</h2>
             {:else}
-              <Row compact>
+              <div class="feeds-categories_row">
                 <h2 class="feeds-categories_title">
                   {category.title}
                 </h2>
@@ -71,7 +70,7 @@
                   }}
                   >{$t.deleteCategory}
                 </Button>
-              </Row>
+              </div>
             {/if}
             {#if feeds.length > 0}
               <Card>
@@ -111,7 +110,13 @@
   .feeds-categories_title {
     flex-grow: 1;
     padding-inline-start: var(--padding-l);
-    margin-bottom: var(--padding-l);
+    padding-bottom: var(--padding-l);
     font: var(--page-title-font);
   }
+
+  .feeds-categories_row {
+    display: flex;
+    gap: var(--padding-m);
+    align-items: baseline;
+  }
 </style>
diff --git a/web/ui/button.svelte b/web/ui/button.svelte
@@ -105,6 +105,7 @@
 
     &.is-square {
       width: 44px;
+      height: 44px;
     }
 
     &.is-dangerous {

diff --git a/web/ui/navbar/item.svelte b/web/ui/navbar/item.svelte
@@ -111,13 +111,15 @@
     }
 
     &:active {
-      padding-top: 1px;
       box-shadow: var(--flat-active-shadow);
+
+      & > * {
+        transform: translateY(1px);
+      }
     }
   }
 
   .navbar-item_text {
-    padding: 4px 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;

diff --git a/web/ui/row.svelte b/web/ui/row.svelte
@@ -10,7 +10,7 @@
   .row {
     display: flex;
     gap: var(--padding-l);
-    align-items: baseline;
+    align-items: center;
 
     &.is-compact {
       gap: var(--padding-m);