Simplify responsive layouts. Remove button vertical stacking and always fit them on the same row.

frontend/src/assets/style.css

@@ -200,6 +200,11 @@ a:focus-visible {
   justify-content: flex-start;
 }
 
+.button-row button {
+  flex: 1;
+  min-width: 0;
+}
+
 .surface {
   background: var(--color-surface);
   border: 1px solid var(--color-border);
@@ -678,15 +683,8 @@ th {
   }
 }
 
-/* Mobile portrait (touch) or very narrow screens: stack buttons */
+/* Mobile portrait (touch) or very narrow screens */
 @media (max-width: 500px) and (orientation: portrait) and (pointer: coarse), (max-width: 350px) {
-  button {
-    width: 100%;
-  }
-
-  .button-row {
-    flex-direction: column;
-  }
 }
 
 .dialog-backdrop {

frontend/src/components/DeviceLinkView.vue

@@ -55,13 +55,8 @@ onMounted(async () => {
   justify-content: flex-start;
 }
 
-@media (max-width: 720px) {
-  .button-row {
-    flex-direction: column;
-  }
-
-  .button-row button {
-    width: 100%;
-  }
+.button-row button {
+  flex: 1;
+  min-width: 0;
 }
 </style>

frontend/src/components/HostProfileView.vue

@@ -130,11 +130,7 @@ const handleButtonRowKeydown = (event) => {
 .host-view { padding: 3rem 1.5rem 4rem; }
 .host-actions { display: flex; flex-direction: column; gap: 0.75rem; }
 .host-actions .button-row { gap: 0.75rem; flex-wrap: wrap; }
-.host-actions .button-row button { flex: 0 0 auto; }
+.host-actions .button-row button { flex: 1 1 0; }
 .note { margin: 0; color: var(--color-text-muted); }
 .empty-state { margin: 0; color: var(--color-text-muted); }
-@media (max-width: 600px) {
-  .host-actions .button-row { flex-direction: column; }
-  .host-actions .button-row button { width: 100%; }
-}
 </style>

frontend/src/components/SessionList.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="section-block" data-component="session-list-section">
     <div class="section-header">
-      <h2>Login Sessions</h2>
+      <h2>Active Sessions</h2>
       <p class="section-description">{{ sectionDescription }}</p>
     </div>
     <div class="section-body">

frontend/src/components/UserBasicInfo.vue

@@ -50,14 +50,13 @@ const userLoaded = computed(() => !!props.name)
 
 <style scoped>
 .user-info.has-extra {
-  grid-template-columns: auto 1fr;
+  grid-template-columns: auto 1fr 2fr;
   grid-template-areas:
-    "heading heading"
-    "org org"
-    "label1 value1"
-    "label2 value2"
-    "label3 value3"
-    "extra extra";
+    "heading heading extra"
+    "org org extra"
+    "label1 value1 extra"
+    "label2 value2 extra"
+    "label3 value3 extra";
 }
 
 .user-info:not(.has-extra) {
@@ -70,15 +69,16 @@ const userLoaded = computed(() => !!props.name)
     "label3 value3";
 }
 
-@media (min-width: 720px) {
+@media (max-width: 720px) {
   .user-info.has-extra {
-    grid-template-columns: auto 1fr 2fr;
+    grid-template-columns: auto 1fr;
     grid-template-areas:
-      "heading heading extra"
-      "org org extra"
-      "label1 value1 extra"
-      "label2 value2 extra"
-      "label3 value3 extra";
+      "heading heading"
+      "org org"
+      "label1 value1"
+      "label2 value2"
+      "label3 value3"
+      "extra extra";
   }
 }