style(sidebar): align utility settings button icon spacing

Author: Dimillian

src/features/app/components/SidebarBottomRail.tsx

@@ -164,15 +164,17 @@ export function SidebarBottomRail({
           </div>
         )}
         <div className="sidebar-utility-actions">
-          <button
-            className="ghost sidebar-labeled-button sidebar-utility-button"
-            type="button"
-            onClick={onOpenSettings}
-            aria-label="Open settings"
-          >
-            <Settings size={14} aria-hidden />
-            <span>Settings</span>
-          </button>
+            <button
+              className="ghost sidebar-labeled-button sidebar-utility-button"
+              type="button"
+              onClick={onOpenSettings}
+              aria-label="Open settings"
+            >
+              <span className="sidebar-labeled-button-icon" aria-hidden>
+                <Settings size={14} aria-hidden />
+              </span>
+              <span>Settings</span>
+            </button>
           {showDebugButton && (
             <button
               className="ghost sidebar-utility-button"

src/styles/sidebar.css

@@ -1783,6 +1783,15 @@
   transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
 }
 
+.sidebar-labeled-button-icon {
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
 .sidebar-labeled-button:hover,
 .sidebar-labeled-button:focus-visible,
 .sidebar-labeled-button.is-open {
@@ -1932,7 +1941,7 @@
 
 .sidebar-utility-button {
   height: 34px;
-  justify-content: center;
+  justify-content: flex-start;
   flex: 1;
 }