pixelpeeping

frontend/src/sidebar/Sidebar.jsx

@@ -512,9 +512,9 @@ const Sidebar = ({
                     style={tenantMenuStyle}
                   >
                     {showTenantList ? (
-                      <>
+                      <div className="menu__section">
                         <div className="menu__heading">Switch tenant</div>
-                        <div className="menu__list">
+                        <div className="menu__wrapper">
                           {tenants.map((tenant) => {
                             const tenantId = tenant?.id || null;
                             const isActive = tenantId === activeTenantId;
@@ -523,7 +523,7 @@ const Sidebar = ({
                               <button
                                 key={tenantId || tenantLabel}
                                 type="button"
-                                className={`menu__item${isActive ? ' active' : ''}`}
+                                className={`menu__button${isActive ? ' active' : ''}`}
                                 onClick={() => handleTenantSelect(tenant)}
                                 role="menuitem"
                               >
@@ -535,25 +535,27 @@ const Sidebar = ({
                             );
                           })}
                         </div>
-                      </>
+                      </div>
                     ) : null}
-                    <div className="menu__footer">
+                    <div className="menu__section">
-                      <button
+                      <div className="menu__wrapper">
-                        type="button"
+                        <button
-                        className="menu__button"
+                          type="button"
-                        onClick={handleSettingsFromMenu}
+                          className="menu__button"
-                      >
+                          onClick={handleSettingsFromMenu}
-                        <SettingsIcon size={16} />
+                        >
-                        Settings
+                          <SettingsIcon size={16} />
-                      </button>
+                          Settings
-                      <button
+                        </button>
-                        type="button"
+                        <button
-                        className="menu__button menu__button--danger"
+                          type="button"
-                        onClick={handleLogoutFromMenu}
+                          className="menu__button menu__button--danger"
-                      >
+                          onClick={handleLogoutFromMenu}
-                        <LogoutIcon size={16} />
+                        >
-                        Log out
+                          <LogoutIcon size={16} />
-                      </button>
+                          Log out
+                        </button>
+                      </div>
                     </div>
                     {themeMenuSection}
                   </div>,

frontend/src/styles/detail/detail-panels.css

@@ -199,7 +199,7 @@
 }
 
 .selection-assignment__list {
-  max-height: 240px;
+  max-height: max(240px, 50vh);
   overflow-y: auto;
   padding: 0 0.25rem 0.25rem;
 }

frontend/src/styles/sidebar/sidebar.css

@@ -13,7 +13,7 @@
   align-items: center;
   gap: 0.22rem;
   padding: 0.32rem 0.48rem;
-  border-radius: 8px;
+  border-radius: 0.5rem;
   cursor: pointer;
   color: inherit;
   transition: background 0.12s ease, color 0.12s ease;
@@ -83,12 +83,12 @@
   transform: translateY(-50%);
   display: flex;
   gap: 0;
+  margin-right: 0.3rem;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.12s ease;
   background-color: var(--surface-overlay);
-  border-radius: 8px;
+  border-radius: 0.2rem;
-  padding: 0 0.18rem;
 }
 
 .folder-row__actions .icon-button {
@@ -99,6 +99,7 @@
 .folder-row:focus-within .folder-row__actions {
   opacity: 1;
   pointer-events: auto;
+  background-color: var(--surface-overlay);
 }
 
 .folder-children {
@@ -304,6 +305,7 @@
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
+  text-align: left;
 }
 
 .menu__check-slot {
@@ -326,15 +328,18 @@
   font-size: 0.85rem;
 }
 
-.menu__footer {
+.menu__wrapper {
-  border-top: 1px solid var(--border-muted, var(--border));
   padding: 0.35rem 0.5rem;
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
 }
 
-.menu--simple .menu__footer {
+.menu__section {
+  border-top: 1px solid var(--border-muted, var(--border));
+}
+
+.menu__section:first-of-type {
   border-top: none;
 }
 
@@ -396,6 +401,20 @@
   transition: background 0.15s ease, color 0.15s ease;
 }
 
+.menu__button .menu__check-slot {
+  width: 1rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--accent);
+}
+
+.menu__button.active {
+  font-weight: 600;
+  color: var(--accent);
+  background: var(--accent-soft);
+}
+
 .menu__button:hover,
 .menu__button:focus-visible {
   background: var(--sidebar-hover-bg);