Views in frontend changed

frontend/src/App.css

@@ -11,12 +11,7 @@
   flex: 1;
   overflow-y: auto;
   overscroll-behavior: contain;
-}
-
-@media (max-width: 768px) {
-  .app-content {
   padding-bottom: calc(6rem + env(safe-area-inset-bottom));
-  }
 }
 
 @keyframes fadeInUp {

frontend/src/components/BottomNav.css

@@ -1,25 +1,22 @@
 .bottom-nav {
-  display: none;
-}
-
-@media (max-width: 768px) {
-  .bottom-nav {
   display: flex;
   justify-content: space-around;
   align-items: flex-end;
   position: fixed;
-    left: 0;
+  left: 50%;
-    right: 0;
+  transform: translateX(-50%);
   bottom: 0;
+  width: 100%;
+  max-width: 48rem;
   z-index: 50;
   padding: 0.25rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
   background: var(--surface-container-lowest);
   box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
   border-radius: var(--radius-lg) var(--radius-lg) 0 0;
   height: 5.5rem;
-  }
+}
 
-  .bottom-nav-item {
+.bottom-nav-item {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -35,14 +32,14 @@
   transition: color 0.15s;
   position: relative;
   min-width: 3.5rem;
-  }
+}
 
-  .bottom-nav-item.disabled {
+.bottom-nav-item.disabled {
   opacity: 0.4;
   cursor: not-allowed;
-  }
+}
 
-  .nav-icon-wrap {
+.nav-icon-wrap {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -51,9 +48,9 @@
   border-radius: var(--radius-full);
   color: inherit;
   position: relative;
-  }
+}
 
-  .nav-fab {
+.nav-fab {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -65,13 +62,13 @@
   box-shadow: 0 4px 14px rgba(70, 0, 173, 0.35);
   margin-top: -1.5rem;
   transition: transform 0.15s;
-  }
+}
 
-  .nav-fab:active {
+.nav-fab:active {
   transform: scale(0.92);
-  }
+}
 
-  .nav-badge {
+.nav-badge {
   position: absolute;
   top: 0;
   right: -2px;
@@ -87,37 +84,36 @@
   border-radius: var(--radius-full);
   border: 2px solid var(--surface-container-lowest);
   line-height: 1;
-  }
+}
 
-  .nav-label {
+.nav-label {
   font-size: 0.7rem;
   font-weight: 500;
   line-height: 1;
   color: var(--on-surface-variant);
-  }
+}
 
-  .nav-label--active {
+.nav-label--active {
   color: var(--primary);
   font-weight: 700;
-  }
+}
 
-  .nav-indicator {
+.nav-indicator {
   width: 0.375rem;
   height: 0.375rem;
   background: var(--primary);
   border-radius: var(--radius-full);
   margin-top: 0.125rem;
-  }
+}
-
+
-  .bottom-nav-item.active .nav-icon-wrap {
+.bottom-nav-item.active .nav-icon-wrap {
-    color: var(--primary);
+  color: var(--primary);
-  }
+}
-
+
-  .bottom-nav-item.active .nav-icon-wrap svg {
+.bottom-nav-item.active .nav-icon-wrap svg {
-    stroke-width: 2.5;
+  stroke-width: 2.5;
-  }
+}
-
+
-  .nav-elevated.active .nav-label {
+.nav-elevated.active .nav-label {
-    color: var(--tertiary);
+  color: var(--tertiary);
-  }
 }

frontend/src/components/TopBar.css

@@ -1,18 +1,13 @@
 .top-bar {
-  display: none;
-}
-
-@media (max-width: 768px) {
-  .top-bar {
   display: block;
   position: sticky;
   top: 0;
   z-index: 40;
   background: var(--surface);
   box-shadow: 0 1px 3px rgba(0,0,0,0.06);
-  }
+}
 
-  .topbar-inner {
+.topbar-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -20,9 +15,9 @@
   padding: 0 var(--margin-main);
   max-width: 48rem;
   margin: 0 auto;
-  }
+}
 
-  .topbar-back {
+.topbar-back {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -34,30 +29,29 @@
   color: var(--primary);
   cursor: pointer;
   transition: background 0.15s;
-  }
+}
 
-  .topbar-back:hover {
+.topbar-back:hover {
   background: var(--surface-container-high);
-  }
+}
 
-  .topbar-title {
+.topbar-title {
   font-size: 1.15rem;
   font-weight: 700;
   color: var(--primary);
   letter-spacing: -0.01em;
-  }
+}
 
-  .topbar-logo-img {
+.topbar-logo-img {
   height: 2rem;
   width: auto;
-  }
+}
 
-  .topbar-spacer {
+.topbar-spacer {
   width: 2.5rem;
-  }
+}
 
-  .topbar-right {
+.topbar-right {
   display: flex;
   align-items: center;
-  }
 }