pleroma-fe

commit: f23470c9ab4413a62dfc4a9608c4c21ee3080134
parent fd0b9099bc7913373b292571f912fc23f8fa2c53
Author: Henry Jameson <me@hjkos.com>
Date:   Tue, 31 Dec 2024 01:04:51 +0200

fix paddings on badges in navigation

Diffstat:
M
src/components/nav_panel/nav_panel.vue
6
------
M
src/components/navigation/navigation_entry.vue
26
+++++++++-----------------

2 files changed, 9 insertions(+), 23 deletions(-)
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
@@ -153,12 +153,6 @@
     margin-right: 0.8em;
     font-size: 1.1em;
   }
-
-  .timelines-chevron {
-    margin-left: 0.8em;
-    font-size: 1.1em;
-  }
-
   .timelines-background {
     padding: 0 0 0 0.6em;
   }
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
@@ -82,8 +82,12 @@
   --__horizontal-gap: 0.5em;
   --__vertical-gap: 0.4em;
 
-  padding: 0;
-  display: flex;
+  padding: var(--__vertical-gap) var(--__horizontal-gap);
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-auto-columns: var(--__line-height);
+  grid-auto-flow: column;
+  grid-gap: var(--__horizontal-gap);
   align-items: baseline;
 
   &[aria-expanded] {
@@ -93,8 +97,6 @@
   .main-link {
     line-height: var(--__line-height);
     box-sizing: border-box;
-    flex: 1;
-    padding: var(--__vertical-gap) var(--__horizontal-gap);
   }
 
   .menu-icon {
@@ -104,26 +106,16 @@
     margin-right: var(--__horizontal-gap);
   }
 
-  .timelines-chevron {
-    line-height: var(--__line-height);
-    padding: 0;
-    width: var(--__line-height);
-    margin-right: 0;
-  }
-
+  .timelines-chevron,
   .extra-button {
     line-height: var(--__line-height);
+    width: 100%;
     padding: 0;
-    width: var(--__line-height);
     text-align: center;
-
-    &:last-child {
-      margin-right: calc(-1 * var(--__horizontal-gap));
-    }
   }
 
   .badge {
-    margin: 0 var(--__horizontal-gap);
+    justify-self: center;
   }
 
   .iconEmoji {