fix(poster): adjust responsive design on small screens

Author: dvcol

src/components/views/panel/PanelContent.vue

@@ -85,6 +85,10 @@ const onTouchEnd = (e: TouchEvent) => {
         opacity: 0;
       }
     }
+
+    @media (width < 725px) {
+      padding: 0 0.75rem 1rem;
+    }
   }
 }
 </style>

src/components/views/panel/PanelPoster.vue

@@ -108,17 +108,22 @@ const { openTab } = useLinksStore();
 @include transition.scale;
 
 .poster-container {
-  --poster-height: calc(min(var(--half-width), var(--height-70-dvh)) * (9 / 16));
+  --min-width: var(--half-width);
+  --poster-height: calc(min(var(--min-width), var(--height-70-dvh)) * (9 / 16));
   --poster-width: calc(var(--poster-height) * (2 / 3));
 
+  @media (width < 725px) {
+    --min-width: calc(var(--width-80-dvh) - 2rem);
+  }
+
   &.link {
     @include mixin.hover-box-shadow;
 
     cursor: pointer;
   }
 
   &.landscape:not(:has(.poster.portrait)) {
-    --poster-width: min(var(--half-width), var(--height-70-dvh));
+    --poster-width: min(var(--min-width), var(--height-70-dvh));
     --poster-height: calc(var(--poster-width) * (9 / 16));
   }
 

src/components/views/panel/PanelStatistics.vue

@@ -37,7 +37,9 @@ const isCompact = watchMedia('(max-width: 725px)');
 
 <template>
   <NFlex class="statistics-container" justify="center">
-    <slot v-if="isCompact" />
+    <div v-if="isCompact" class="slot-container">
+      <slot />
+    </div>
     <PanelRatings v-if="enableRatings" :ratings="ratings" />
     <slot v-if="!isCompact" />
     <PanelScore
@@ -53,4 +55,9 @@ const isCompact = watchMedia('(max-width: 725px)');
 .statistics-container {
   width: 100%;
 }
+
+.slot-container {
+  display: flex;
+  flex: 1 1 100%;
+}
 </style>

src/components/views/panel/ShowPanelButtons.vue

@@ -325,14 +325,15 @@ onMounted(() => fetchLists());
 .panel-buttons {
   display: flex;
   flex-wrap: wrap;
-  gap: 1.25rem;
+  gap: 1.25rem 0;
   align-items: center;
   justify-content: center;
   width: 100%;
   margin: 1rem 1rem 1.25rem;
 
   .button-container {
     margin: auto;
+    padding: 0 0.5rem;
 
     i {
       margin-left: calc(0% - var(--n-icon-margin));
@@ -361,6 +362,7 @@ onMounted(() => fetchLists());
       }
 
       &:not(.visible) {
+        padding: 0;
         cursor: default;
         pointer-events: none;
       }

src/styles/base.scss

@@ -21,6 +21,7 @@
   --half-width: 50dvw;
   --width-40-dvh: 40dvw;
   --width-70-dvh: 70dvw;
+  --width-80-dvh: 80dvw;
 
   /* font variables */
   --font-size-xxs: 0.625rem;