Relayout the menu items in nav menu again

cheeaun · Oct 19, 2023 · 71bf860 · 71bf860
1 parent 2916d11
commit 71bf860
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/src/components/nav-menu.css b/src/components/nav-menu.css
@@ -1,3 +1,9 @@
+.nav-menu section:last-child {
+  background-color: var(--bg-faded-color);
+  margin-bottom: -8px;
+  padding-bottom: 8px;
+}
+
 @media (min-width: 23em) {
   .nav-menu {
     display: grid;
@@ -8,6 +14,7 @@
       'left right';
     padding: 0;
     width: 22em;
+    max-width: 100%;
   }
   .nav-menu .top-menu {
     grid-area: top;
@@ -27,7 +34,6 @@
     }
   }
   .nav-menu section:last-child {
-    background-color: var(--bg-faded-color);
     background-image: linear-gradient(
         to right,
         var(--divider-color) 1px,
@@ -45,6 +51,15 @@
     animation: phanpying 0.2s ease-in-out both;
     border-top-right-radius: inherit;
     border-bottom-right-radius: inherit;
+    margin-bottom: 0;
+    display: flex;
+    flex-direction: column;
+
+    .divider-grow {
+      flex-grow: 1;
+      height: auto;
+      background-color: transparent;
+    }
   }
   .nav-menu section:last-child > .szh-menu__divider:first-child {
     display: none;

diff --git a/src/components/nav-menu.jsx b/src/components/nav-menu.jsx
@@ -249,6 +249,7 @@ function NavMenu(props) {
                 <Icon icon="block" size="l" />
                 Blocked users&hellip;
               </MenuItem>
+              <MenuDivider className="divider-grow" />
               <MenuItem
                 onClick={() => {
                   states.showKeyboardShortcutsHelp = true;