fix(css): make panels and buttons more responsive

Author: dvcol

src/components/views/panel/MoviePanel.vue

@@ -315,7 +315,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <NFlex justify="center" align="center" vertical>
+  <NFlex class="panel-container" justify="center" align="center" vertical>
     <TitleLink
       v-if="title"
       class="show-title"
@@ -372,8 +372,16 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
-.show-title-skeleton {
-  height: 1.5rem;
-  margin-top: 0.625rem;
+.panel-container {
+  & > div:nth-child(n + 3) {
+    @media (width > 1200px) {
+      max-width: min(var(--half-width), var(--height-70-dvh));
+    }
+  }
+
+  .show-title-skeleton {
+    height: 1.5rem;
+    margin-top: 0.625rem;
+  }
 }
 </style>

src/components/views/panel/MoviePanelButtons.vue

@@ -223,9 +223,9 @@ onMounted(() => fetchLists());
 .panel-buttons {
   display: flex;
   flex-wrap: wrap;
-  gap: 1rem;
+  gap: 1.25rem;
   align-items: center;
-  justify-content: center;
+  justify-content: space-around;
   width: 100%;
   margin: 0.75rem 1rem 1.25rem;
 
@@ -236,12 +236,6 @@ onMounted(() => fetchLists());
   }
 }
 
-@media (width > 800px) {
-  .panel-buttons {
-    gap: 1.25rem 3rem;
-  }
-}
-
 @media (width < 660px) {
   .button-container {
     min-width: 45%;

src/components/views/panel/PanelPoster.vue

@@ -81,11 +81,11 @@ const key = computed(() => {
 @include transition.scale;
 
 .poster-container {
-  --poster-height: calc(50dvw * (9 / 16));
+  --poster-height: calc(min(var(--half-width), var(--height-70-dvh)) * (9 / 16));
   --poster-width: calc(var(--poster-height) * (2 / 3));
 
   &.landscape {
-    --poster-width: 50dvw;
+    --poster-width: min(var(--half-width), var(--height-70-dvh));
     --poster-height: calc(var(--poster-width) * (9 / 16));
   }
 

src/components/views/panel/PanelRating.vue

@@ -122,6 +122,7 @@ const _rating = computed(() => (rating?.value ?? 0) * 10);
   --duration: 1000ms;
 
   flex: 1 0 6rem;
+  max-width: 24rem;
 
   .rating-skeleton {
     width: 2.125rem;

src/components/views/panel/PanelScore.vue

@@ -107,6 +107,7 @@ const containerRef = ref<InstanceType<typeof TextField>>();
   --duration: 1000ms;
 
   flex: 1 0 6rem;
+  max-width: 24rem;
 
   .score-label {
     align-self: center;

src/components/views/panel/PanelStatistics.vue

@@ -47,7 +47,7 @@ const isCompact = watchMedia('(max-width: 725px)');
 </script>
 
 <template>
-  <NFlex class="statistics-container" justify="space-around">
+  <NFlex class="statistics-container" justify="center">
     <slot v-if="isCompact" />
     <PanelRating
       v-if="enableRatings"

src/components/views/panel/PersonPanel.vue

@@ -67,7 +67,7 @@ const { openTab } = useLinksStore();
 </script>
 
 <template>
-  <NFlex justify="center" align="center" vertical>
+  <NFlex class="panel-container" justify="center" align="center" vertical>
     <TitleLink
       v-if="title"
       class="show-title"
@@ -93,8 +93,16 @@ const { openTab } = useLinksStore();
 </template>
 
 <style lang="scss" scoped>
-.show-title-skeleton {
-  height: 1.5rem;
-  margin-top: 0.625rem;
+.panel-container {
+  & > div:nth-child(n + 3) {
+    @media (width > 1200px) {
+      max-width: min(var(--half-width), var(--height-70-dvh));
+    }
+  }
+
+  .show-title-skeleton {
+    height: 1.5rem;
+    margin-top: 0.625rem;
+  }
 }
 </style>

src/components/views/panel/ShowPanel.vue

@@ -523,7 +523,7 @@ const { openTab } = useLinksStore();
 </script>
 
 <template>
-  <NFlex justify="center" align="center" vertical>
+  <NFlex class="panel-container" justify="center" align="center" vertical>
     <TitleLink
       v-if="title"
       class="show-title"
@@ -603,8 +603,16 @@ const { openTab } = useLinksStore();
 </template>
 
 <style lang="scss" scoped>
-.show-title-skeleton {
-  height: 1.5rem;
-  margin-top: 0.625rem;
+.panel-container {
+  & > div:nth-child(n + 3) {
+    @media (width > 1200px) {
+      max-width: min(var(--half-width), var(--height-70-dvh));
+    }
+  }
+
+  .show-title-skeleton {
+    height: 1.5rem;
+    margin-top: 0.625rem;
+  }
 }
 </style>

src/components/views/panel/ShowPanelButtons.vue

@@ -314,9 +314,9 @@ onMounted(() => fetchLists());
 .panel-buttons {
   display: flex;
   flex-wrap: wrap;
-  gap: 1rem;
+  gap: 1.25rem;
   align-items: center;
-  justify-content: center;
+  justify-content: space-around;
   width: 100%;
   margin: 1rem 1rem 1.25rem;
 
@@ -347,12 +347,6 @@ onMounted(() => fetchLists());
   }
 }
 
-@media (width > 800px) {
-  .panel-buttons {
-    gap: 1.25rem 3rem;
-  }
-}
-
 @media (width < 660px) {
   .button-container {
     min-width: 45%;

src/styles/base.scss

@@ -4,6 +4,11 @@
   --full-height: 100dvh;
   --half-height: 50dvh;
   --height-40-dvh: 40dvh;
+  --height-70-dvh: 70dvh;
+
+  /** width */
+  --full-width: 100dvw;
+  --half-width: 50dvw;
 
   /* font variables */
   --font-size-xxs: 0.625rem;