phone screen

frontend/src/styles.css

@@ -276,7 +276,36 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 }
 
 @media (max-width: 920px) {
-  .layout { grid-template-columns: 1fr; }
+  body {
+    overflow: auto;
+  }
+
+  .layout {
+    grid-template-columns: 1fr;
+    height: auto;
+    min-height: 100dvh;
+    overflow: visible;
+    padding: 0.75rem;
+  }
+
+  .sidebar,
+  .main {
+    min-height: auto;
+    overflow: visible;
+  }
+
+  .student-layout .sidebar {
+    order: 1;
+  }
+
+  .student-layout .main {
+    order: 2;
+  }
+
+  .card {
+    border-radius: 18px;
+  }
+
   .composer { grid-template-columns: 1fr; }
   .hero { align-items: flex-start; }
   .session-user {
@@ -284,4 +313,75 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
     margin-left: 0;
     justify-content: space-between;
   }
+
+  .instruction-stage {
+    flex: 0 0 auto;
+    justify-content: flex-start;
+    min-height: 220px;
+  }
+
+  .instruction-stage p {
+    max-height: none;
+    overflow: visible;
+    font-size: 1.1rem;
+  }
+}
+
+@media (max-width: 560px) {
+  .layout {
+    gap: 0.75rem;
+    padding: 0.5rem;
+  }
+
+  .card {
+    padding: 0.85rem;
+    border-radius: 16px;
+  }
+
+  .sidebar,
+  .main,
+  .today-panel {
+    gap: 0.85rem;
+  }
+
+  .sidebar h2,
+  .main h1 {
+    margin: 0;
+  }
+
+  .main h1 {
+    font-size: 1.85rem;
+  }
+
+  .hero {
+    gap: 0.75rem;
+  }
+
+  .avatar {
+    width: 112px;
+    height: 112px;
+    border-radius: 22px;
+  }
+
+  .session-user {
+    align-items: stretch;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .today-card-head {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .student-transmission p {
+    white-space: normal;
+  }
+
+  button,
+  input,
+  select {
+    width: 100%;
+  }
 }