Made changes to CSS and merged together.

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

@@ -150,7 +150,7 @@ onMounted(async () => {
           </svg>
         </button>
       </nav>
-      <LoginButton class="login-btn" />
+      <LoginButton class="login-btn-container" />
     </header>
 
     <main class="main-content">
@@ -162,35 +162,8 @@ onMounted(async () => {
 </template>
 
 <style scoped>
-.layout-root {
-  width: 100%;
-  min-height: 100vh;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  background: var(--header-bg);
-}
+/* Only keep styles unique to ParentLayout */
 
-/* top bar holds title and logout button */
-.topbar {
-  display: flex;
-  align-items: stretch;
-  padding: 5px 5px;
-  height: 48px;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.back-btn-container {
-  height: 100%;
-  display: flex;
-  align-items: stretch;
-  flex: 1 1 0;
-  justify-content: flex-start;
-}
-
-/* View Selector styles */
 .view-selector {
   height: 100%;
   display: flex;
@@ -230,58 +203,7 @@ onMounted(async () => {
   background: var(--button-hover-bg);
 }
 
-/* main content remains centered */
-.main-content {
-  flex: 1 1 auto;
-  width: 100%;
-  justify-content: center;
-  align-items: flex-start;
-  box-sizing: border-box;
-  min-height: 0;
-  height: 0; /* Ensures children can use 100% height */
-  overflow: hidden; /* Prevents parent from scrolling */
-  overflow-y: visible;
-}
-
-/* back button specific styles */
-.back-btn {
-  background: var(--button-bg);
-  border: 0;
-  padding: 0.6rem 1rem;
-  border-radius: 8px 8px 0 0;
-  cursor: pointer;
-  color: var(--button-text);
-  font-weight: 600;
-  height: 100%; /* Make the button fill its parent */
-  box-sizing: border-box;
-  display: flex;
-  align-items: center; /* Center the text/icon vertically */
-}
-
-.login-btn {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  flex: 1 1 0;
-  justify-content: flex-end;
-}
-
-.app-version {
-  position: fixed;
-  right: 18px;
-  bottom: 12px;
-  font-size: 0.92rem;
-  color: var(--app-version);
-  opacity: 0.85;
-  z-index: 100;
-  pointer-events: none;
-  user-select: none;
-  font-family: monospace;
-}
-
 @media (max-width: 480px) {
-  .back-btn,
-  .login-btn button,
   .view-selector button {
     padding: 0.45rem 0.75rem;
     font-size: 0.85rem;