fix(css): fix loading skeleton width on small screens

Author: dvcol

src/components/views/panel/MoviePanel.vue

@@ -286,7 +286,7 @@ onMounted(() => {
     <NSkeleton
       v-else
       class="show-title-skeleton"
-      style="width: var(--half-height)"
+      style="width: min(var(--half-width), var(--height-70-dvh))"
       round
     />
 
@@ -323,6 +323,7 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .panel-container {
+  // everything under the poster
   & > div:nth-child(n + 3) {
     @media (width > 1200px) {
       max-width: min(var(--half-width), var(--height-70-dvh));

src/components/views/panel/PanelOverview.vue

@@ -28,7 +28,7 @@ defineProps({
     <AnchorLink v-if="title" class="title" :href="url" :title="label" :component="NH4">
       {{ title }}
     </AnchorLink>
-    <NSkeleton v-else class="title-skeleton" style="width: var(--height-40-dvh)" round />
+    <NSkeleton v-else class="title-skeleton" style="width: var(--width-40-dvh)" round />
 
     <div v-if="overview">{{ overview }}</div>
     <NSkeleton v-else style="width: 100%" :repeat="3" :sharp="false" />

src/components/views/panel/PersonPanel.vue

@@ -82,7 +82,7 @@ const titleUrl = computed(() => {
     <NSkeleton
       v-else
       class="show-title-skeleton"
-      style="width: var(--half-height)"
+      style="width: min(var(--half-width), var(--height-70-dvh))"
       round
     />
 
@@ -96,6 +96,7 @@ const titleUrl = computed(() => {
 
 <style lang="scss" scoped>
 .panel-container {
+  // everything under the posters
   & > div:nth-child(n + 3) {
     @media (width > 1200px) {
       max-width: min(var(--half-width), var(--height-70-dvh));

src/components/views/panel/ShowPanel.vue

@@ -425,7 +425,7 @@ onMounted(() => {
     <NSkeleton
       v-else
       class="show-title-skeleton"
-      style="width: var(--half-height)"
+      style="width: min(var(--half-width), var(--height-70-dvh))"
       round
     />
 
@@ -492,6 +492,7 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .panel-container {
+  // everything under the poster
   & > div:nth-child(n + 3) {
     @media (width > 1200px) {
       max-width: min(var(--half-width), var(--height-70-dvh));

src/styles/base.scss

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