diff --git a/client/src/App.vue b/client/src/App.vue index 2346cc3..93d71d1 100644 --- a/client/src/App.vue +++ b/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); diff --git a/client/src/styles/base/_base.scss b/client/src/styles/base/_base.scss index f681d4c..7b9b658 100644 --- a/client/src/styles/base/_base.scss +++ b/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 { diff --git a/client/src/views/Review.vue b/client/src/views/Review.vue index 5480653..cebda32 100644 --- a/client/src/views/Review.vue +++ b/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; + } + } +}