Responsive fixes for settings pages.

components/common/HamburgerButton.js

@@ -13,32 +13,32 @@ export default function HamburgerButton() {
   const menuItems = [
     {
       label: formatMessage(labels.dashboard),
-      value: '/dashboard',
+      url: '/dashboard',
     },
-    { label: formatMessage(labels.realtime), value: '/realtime' },
+    { label: formatMessage(labels.realtime), url: '/realtime' },
     !cloudMode && {
       label: formatMessage(labels.settings),
-      value: '/settings',
+      url: '/settings',
       children: [
         {
           label: formatMessage(labels.websites),
-          value: '/settings/websites',
+          url: '/settings/websites',
         },
         {
           label: formatMessage(labels.teams),
-          value: '/settings/teams',
+          url: '/settings/teams',
         },
         {
           label: formatMessage(labels.users),
-          value: '/settings/users',
+          url: '/settings/users',
         },
       ],
     },
     {
       label: formatMessage(labels.profile),
-      value: '/settings/profile',
+      url: '/settings/profile',
     },
-    !cloudMode && { label: formatMessage(labels.logout), value: '/logout' },
+    !cloudMode && { label: formatMessage(labels.logout), url: '/logout' },
   ].filter(n => n);
 
   const handleClick = () => setActive(state => !state);

components/common/MobileMenu.js

@@ -8,14 +8,14 @@ export default function MobileMenu({ items = [], onClose }) {
 
   const Items = ({ items, className }) => (
     <div className={classNames(styles.items, className)}>
-      {items.map(({ label, value, children }) => {
-        const selected = pathname === value;
+      {items.map(({ label, url, children }) => {
+        const selected = pathname.startsWith(url);
 
         return (
           <>
             <Link
-              key={value}
-              href={value}
+              key={url}
+              href={url}
               className={classNames(styles.item, { [styles.selected]: selected })}
               onClick={onClose}
             >

components/common/SettingsTable.module.css

@@ -1,3 +1,7 @@
+.cell {
+  align-items: center;
+}
+
 .row .cell:last-child {
   gap: 10px;
   justify-content: flex-end;