fix margins

client/src/App.vue

@@ -782,6 +782,7 @@ function confirmLogout() {
   z-index: 10;
   width: 100%;
   height: 100%;
+  overflow-x: hidden;
   opacity: 0;
   transform: scale(0.95);
   filter: blur(10px);

client/src/styles/base/_base.scss

@@ -19,6 +19,7 @@ html,
 	color: $color-text-white;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
+	overflow-x: hidden;
 }
 
 .v-card {

client/src/views/Review.vue

@@ -61,7 +61,7 @@
               elevation="8"
             )
 
-        .mb-4.d-flex.gap-2
+        .mb-2.d-flex.gap-2
           v-btn.text-caption.font-weight-bold.opacity-80(
             variant="text"
             color="amber-lighten-1"
@@ -74,7 +74,7 @@
 
         v-sheet.d-flex.flex-column.align-center.justify-center(
           width="100%"
-          min-height="80"
+          min-height="56"
           color="transparent"
         )
           transition(name="fade-slide" mode="out-in")
@@ -85,7 +85,7 @@
               ScrambleText(:text="$t('review.' + statusCode)")
 
           transition(name="scale")
-            v-chip.mt-2.font-weight-bold.elevation-2(
+            v-chip.mt-1.font-weight-bold.elevation-2(
               v-if="showNext && rankChange"
               :color="rankChange.type === 'up' ? 'teal-accent-4' : 'red-darken-1'"
               variant="flat"
@@ -94,7 +94,7 @@
               v-icon(start size="14") {{ rankChange.type === 'up' ? 'mdi-arrow-up-thick' : 'mdi-arrow-down-thick' }}
               | Level {{ currentItem.srsLevel }} → {{ rankChange.level }}
 
-        v-progress-linear.mt-4.progress-bar(
+        v-progress-linear.mt-2.progress-bar(
           v-model="progressPercent"
           color="primary"
           height="4"
@@ -402,4 +402,24 @@ const getStatusClass = (status) => {
   font-size: $font-sm;
   margin-left: $spacing-sm;
 }
+
+// Landscape optimizations (iPad, tablets)
+@media (orientation: landscape) and (max-height: 900px) {
+  .review-view-container {
+    padding-top: $spacing-xs !important;
+    padding-bottom: $spacing-xs !important;
+  }
+
+  .review-card {
+    padding: $spacing-md !important;
+
+    .text-h3 {
+      font-size: $font-xl !important;
+    }
+
+    .mb-6 {
+      margin-bottom: $spacing-sm !important;
+    }
+  }
+}
 </style>