refactor: Update layout and styling components; remove unused CSS files and enhance button styles

.github/copilot-instructions.md

@@ -11,7 +11,7 @@
 
 ## 🧩 Key Patterns & Conventions
 
-- **Frontend Styling**: Use only `:root` CSS variables from `global.css` for all colors, spacing, and tokens. Example: `--btn-primary`, `--list-item-bg-good`.
+- **Frontend Styling**: Use only `:root` CSS variables from `colors.css` for all colors, spacing, and tokens. Example: `--btn-primary`, `--list-item-bg-good`.
 - **Scoped Styles**: All `.vue` files must use `<style scoped>`. Reference global variables for theme consistency.
 - **API Error Handling**: Backend returns JSON with `error` and `code` (see `backend/api/error_codes.py`). Frontend extracts `{ msg, code }` using `parseErrorResponse(res)` from `api.ts`.
 - **JWT Auth**: Tokens are stored in HttpOnly, Secure, SameSite=Strict cookies.

frontend/vue-app/src/assets/layout-shared.css

@@ -1,108 +0,0 @@
-/* Root layout */
-.layout-root {
-  width: 100%;
-  min-height: 100vh;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  background: var(--header-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
-}
-
-/* Top bar */
-.topbar {
-  display: flex;
-  align-items: stretch;
-  padding: 5px 5px;
-  height: 48px;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-/* Back button container and login button container */
-.back-btn-container,
-.login-btn-container {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  flex: 1 1 0;
-}
-
-.back-btn-container {
-  justify-content: flex-start;
-}
-
-.login-btn-container {
-  justify-content: flex-end;
-}
-
-/* Spacer for layouts without a center nav */
-.spacer {
-  flex: 1 1 auto;
-}
-
-/* Back button */
-.back-btn {
-  background: var(--button-bg, #fff);
-  border: 0;
-  padding: 0.6rem 1rem;
-  border-radius: 8px 8px 0 0;
-  cursor: pointer;
-  color: var(--button-text, #667eea);
-  font-weight: 600;
-  height: 100%;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-}
-
-/* Login button inside login-btn container */
-.login-btn {
-  background: var(--button-bg, #fff);
-  border: 0;
-  padding: 0.6rem 1rem;
-  border-radius: 8px 8px 0 0;
-  cursor: pointer;
-  color: var(--button-text, #667eea);
-  font-weight: 600;
-  height: 100%;
-  display: flex;
-  align-items: center;
-}
-
-/* Main content area */
-.main-content {
-  flex: 1 1 auto;
-  width: 100%;
-  justify-content: center;
-  align-items: flex-start;
-  box-sizing: border-box;
-  min-height: 0;
-  height: 0;
-  overflow: hidden;
-  overflow-y: visible;
-}
-
-/* App version display */
-.app-version {
-  position: fixed;
-  right: 18px;
-  bottom: 12px;
-  font-size: 0.92rem;
-  color: var(--app-version, #cbd5e1);
-  opacity: 0.85;
-  z-index: 100;
-  pointer-events: none;
-  user-select: none;
-  font-family: monospace;
-}
-
-/* Responsive adjustments */
-@media (max-width: 480px) {
-  .back-btn,
-  .login-btn button {
-    padding: 0.45rem 0.75rem;
-    font-size: 0.6rem;
-    height: 100%;
-  }
-}

frontend/vue-app/src/components/shared/LoginButton.vue

@@ -131,16 +131,16 @@ onUnmounted(() => {
 
 <template>
   <div style="position: relative">
-    <button v-if="!isParentAuthenticated" @click="open" aria-label="Parent login" class="login-btn">
+    <button
+      v-if="!isParentAuthenticated"
+      @click="open"
+      aria-label="Parent login"
+      class="login-btn parent-btn"
+    >
       Parent
     </button>
     <div v-else style="display: inline-block; position: relative" ref="dropdownRef">
-      <button
+      <button @click="toggleDropdown" aria-label="Parent menu" class="login-btn parent-btn">
-        @click="toggleDropdown"
-        aria-label="Parent menu"
-        class="login-btn"
-        style="min-width: 80px"
-      >
         Parent ▼
       </button>
       <div
@@ -200,8 +200,41 @@ onUnmounted(() => {
   </div>
 </template>
 
-<style>
+<style scoped>
-/* modal */
+.parent-btn {
+  width: 65px;
+  min-width: 65px;
+  max-width: 65px;
+  height: 48px;
+  min-height: 48px;
+  max-height: 48px;
+  margin: 0;
+  margin-left: 5px;
+  margin-right: 5px;
+  background: var(--button-bg, #fff);
+  border: 0;
+  border-radius: 8px 8px 0 0;
+  cursor: pointer;
+  color: var(--button-text, #667eea);
+  font-weight: 600;
+  font-size: 0.8rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  overflow: hidden;
+  padding: 0;
+  transition:
+    background 0.18s,
+    color 0.18s;
+  white-space: nowrap;
+}
+
+@media (max-width: 480px) {
+  .parent-btn {
+    font-size: 0.7rem;
+  }
+}
 
 .pin-input {
   width: 100%;

frontend/vue-app/src/layout/AuthLayout.vue

@@ -36,15 +36,88 @@ const showBack = computed(
 </script>
 
 <style scoped>
-/* Only keep styles unique to ChildLayout */
+.layout-root {
+  width: 100%;
+  min-height: 100vh;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  background: var(--header-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
+}
 
-.topbar > .spacer {
+.topbar {
+  display: flex;
+  align-items: stretch;
+  padding: 0;
+  height: 48px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.back-btn-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 65px;
+  min-width: 65px;
+  max-width: 65px;
+  height: 48px;
+  min-height: 48px;
+  max-height: 48px;
+  margin-left: 5px;
+  margin-right: 5px;
+  box-sizing: border-box;
+}
+
+.back-btn {
+  width: 65px;
+  min-width: 65px;
+  max-width: 65px;
+  height: 48px;
+  min-height: 48px;
+  max-height: 48px;
+  margin: 0;
+  background: var(--button-bg, #fff);
+  border: 0;
+  border-radius: 8px 8px 0 0;
+  cursor: pointer;
+  color: var(--button-text, #667eea);
+  font-weight: 600;
+  font-size: 0.8rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  overflow: hidden;
+  padding: 0;
+  transition:
+    background 0.18s,
+    color 0.18s;
+}
+
+@media (max-width: 480px) {
+  .back-btn {
+    font-size: 0.7rem;
+  }
+}
+
+.spacer {
+  flex: 1 1 auto;
   height: 100%;
   display: flex;
   align-items: center;
 }
 
-.spacer {
+.main-content {
   flex: 1 1 auto;
+  width: 100%;
+  justify-content: center;
+  align-items: flex-start;
+  box-sizing: border-box;
+  min-height: 0;
+  height: 0;
+  overflow: hidden;
+  overflow-y: visible;
 }
 </style>

frontend/vue-app/src/layout/ChildLayout.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="layout-root">
     <header class="topbar">
-      <div class="back-btn-container">
+      <div class="end-button-container">
         <button v-show="showBack" class="back-btn" @click="handleBack" tabindex="0">← Back</button>
       </div>
       <div class="spacer"></div>
-      <div class="login-btn-container">
+      <div class="end-button-container">
         <LoginButton />
       </div>
     </header>
@@ -35,15 +35,88 @@ const showBack = computed(() => route.path !== '/child')
 </script>
 
 <style scoped>
-/* Only keep styles unique to ChildLayout */
+.layout-root {
+  width: 100%;
+  min-height: 100vh;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  background: var(--header-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
+}
 
-.topbar > .spacer {
+.topbar {
+  display: flex;
+  align-items: stretch;
+  padding: 0;
+  height: 48px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.end-button-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 65px;
+  min-width: 65px;
+  max-width: 65px;
+  height: 48px;
+  min-height: 48px;
+  max-height: 48px;
+  margin-left: 5px;
+  margin-right: 5px;
+  box-sizing: border-box;
+}
+
+.back-btn {
+  width: 65px;
+  min-width: 65px;
+  max-width: 65px;
+  height: 48px;
+  min-height: 48px;
+  max-height: 48px;
+  margin: 0;
+  background: var(--button-bg, #fff);
+  border: 0;
+  border-radius: 8px 8px 0 0;
+  cursor: pointer;
+  color: var(--button-text, #667eea);
+  font-weight: 600;
+  font-size: 0.8rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  overflow: hidden;
+  padding: 0;
+  transition:
+    background 0.18s,
+    color 0.18s;
+}
+
+@media (max-width: 480px) {
+  .back-btn {
+    font-size: 0.7rem;
+  }
+}
+
+.spacer {
+  flex: 1 1 auto;
   height: 100%;
   display: flex;
   align-items: center;
 }
 
-.spacer {
+.main-content {
   flex: 1 1 auto;
+  width: 100%;
+  justify-content: center;
+  align-items: flex-start;
+  box-sizing: border-box;
+  min-height: 0;
+  height: 0;
+  overflow: hidden;
+  overflow-y: visible;
 }
 </style>

frontend/vue-app/src/layout/ParentLayout.vue

@@ -45,7 +45,7 @@ onMounted(async () => {
 <template>
   <div class="layout-root">
     <header class="topbar">
-      <div class="back-btn-container">
+      <div class="back-btn-container edge-btn-container">
         <button v-show="showBack" class="back-btn" @click="handleBack" tabindex="0">← Back</button>
       </div>
       <nav v-if="!hideViewSelector" class="view-selector">
@@ -153,7 +153,9 @@ onMounted(async () => {
           </svg>
         </button>
       </nav>
-      <LoginButton class="login-btn-container" />
+      <div class="login-btn-container edge-btn-container">
+        <LoginButton />
+      </div>
     </header>
 
     <main class="main-content">
@@ -165,14 +167,80 @@ onMounted(async () => {
 </template>
 
 <style scoped>
-/* Only keep styles unique to ParentLayout */
+.layout-root {
+  width: 100%;
+  min-height: 100vh;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  background: var(--header-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
+}
+
+.topbar {
+  display: flex;
+  align-items: stretch;
+  padding: 0;
+  height: 48px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.edge-btn-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 65px;
+  min-width: 65px;
+  max-width: 65px;
+  height: 48px;
+  min-height: 48px;
+  max-height: 48px;
+  margin-left: 5px;
+  margin-right: 5px;
+  box-sizing: border-box;
+}
+
+.back-btn {
+  width: 65px;
+  min-width: 65px;
+  max-width: 65px;
+  height: 48px;
+  min-height: 48px;
+  max-height: 48px;
+  margin: 0;
+  background: var(--button-bg, #fff);
+  border: 0;
+  border-radius: 8px 8px 0 0;
+  cursor: pointer;
+  color: var(--button-text, #667eea);
+  font-weight: 600;
+  font-size: 0.8rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  overflow: hidden;
+  padding: 0;
+  transition:
+    background 0.18s,
+    color 0.18s;
+}
+
+@media (max-width: 480px) {
+  .back-btn {
+    font-size: 0.7rem;
+  }
+}
 
 .view-selector {
   height: 100%;
   display: flex;
   align-items: stretch;
-  flex: 2 1 0;
+  flex: 1 1 0;
   justify-content: center;
+  min-width: 0;
+  z-index: 1;
 }
 
 .view-selector button {
@@ -191,6 +259,7 @@ onMounted(async () => {
     color 0.18s;
   font-size: 1rem;
   box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08);
+  min-width: 0;
 }
 
 .view-selector button.active {
@@ -212,4 +281,29 @@ onMounted(async () => {
     font-size: 0.85rem;
   }
 }
+
+.main-content {
+  flex: 1 1 auto;
+  width: 100%;
+  justify-content: center;
+  align-items: flex-start;
+  box-sizing: border-box;
+  min-height: 0;
+  height: 0;
+  overflow: hidden;
+  overflow-y: visible;
+}
+
+.app-version {
+  position: fixed;
+  right: 18px;
+  bottom: 12px;
+  font-size: 0.92rem;
+  color: var(--app-version, #cbd5e1);
+  opacity: 0.85;
+  z-index: 100;
+  pointer-events: none;
+  user-select: none;
+  font-family: monospace;
+}
 </style>

frontend/vue-app/src/main.ts

@@ -3,9 +3,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import '@/assets/actions-shared.css'
-import '@/assets/layout-shared.css'
 import '@/assets/button-shared.css'
-import '@/assets/view-shared.css'
 
 const app = createApp(App)