Improve screen

frontend/src/styles.css

@@ -452,7 +452,7 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   min-height: 0;
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 0.6rem;
   overflow: hidden;
   background: #eef6ff;
   border: 1px solid #cfe4ff;
@@ -461,24 +461,52 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 }
 .lesson-display p {
   margin: 0;
-  overflow: auto;
   white-space: pre-wrap;
-  font-size: clamp(1rem, 2.2vw, 1.35rem);
-  line-height: 1.5;
 }
-.lesson-assets {
+.lesson-display-head,
+.lesson-asset-toolbar,
+.lesson-asset-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+.asset-counter {
+  color: #64748b;
+  font-size: 0.9rem;
+  font-weight: 700;
+}
+.teacher-transcript {
+  max-height: 4.8rem;
+  overflow: auto;
+  color: #14213d;
+  font-size: clamp(0.95rem, 1.5vw, 1.08rem);
+  line-height: 1.45;
+}
+.lesson-asset-view {
   min-height: 0;
   flex: 1 1 auto;
   display: flex;
+  flex-direction: column;
   gap: 0.75rem;
-  overflow-x: auto;
-  overflow-y: hidden;
-  padding-bottom: 0.25rem;
+  overflow: hidden;
 }
-.lesson-assets img {
-  width: min(100%, 720px);
-  max-height: 100%;
-  flex: 0 0 min(100%, 720px);
+.lesson-asset-toolbar {
+  flex: 0 0 auto;
+}
+.lesson-asset-toolbar strong {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.lesson-asset-actions button {
+  padding: 0.6rem 0.8rem;
+}
+.lesson-asset-view img {
+  width: 100%;
+  min-height: 0;
+  flex: 1 1 auto;
   object-fit: contain;
   border: 1px solid #dbeafe;
   border-radius: 14px;
@@ -717,10 +745,24 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
     border-radius: 16px;
   }
 
-  .lesson-display p {
+  .teacher-transcript {
+    max-height: 3.1rem;
     font-size: 1rem;
   }
 
+  .lesson-display-head,
+  .lesson-asset-toolbar {
+    align-items: stretch;
+    flex-direction: column;
+    gap: 0.4rem;
+  }
+
+  .lesson-asset-actions {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.5rem;
+  }
+
   .lesson-composer {
     grid-template-columns: 1fr 1fr;
     gap: 0.5rem;