fix(panel): fix links overflow issues on small screen

Author: dvcol

src/components/common/typography/TextField.vue

@@ -90,7 +90,7 @@ const { openTab } = useLinksStore();
       <span class="prefix">{{ label }}</span>
     </slot>
     <slot>
-      <NFlex v-if="array" class="value">
+      <NFlex v-if="array" class="value" wrap>
         <template v-if="values !== undefined">
           <TagLinkComponent
             v-for="(tag, i) of values"

src/components/container/ContainerComponent.ce.vue

@@ -113,6 +113,7 @@ const root = ref<HTMLElement>();
   text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  scrollbar-width: thin;
 }
 
 #trakt-extension-root {

src/components/views/panel/MoviePanelDetails.vue

@@ -94,14 +94,15 @@ const movieTitle = computed(() => deCapitalise(movie?.value?.title));
 </script>
 
 <template>
-  <NFlex size="large" class="container" vertical>
-    <NFlex vertical size="large">
+  <NFlex size="large" class="container" vertical wrap>
+    <NFlex class="link-row" vertical size="large" wrap>
       <!--  Genres  -->
       <TextField
         :label="i18n('genres')"
         :values="genres"
         :skeleton="{ width: '3rem' }"
         array
+        wrap
       />
 
       <!--  links  -->
@@ -201,6 +202,11 @@ const movieTitle = computed(() => deCapitalise(movie?.value?.title));
   width: 100%;
 }
 
+.link-row {
+  overflow-x: auto;
+  scrollbar-width: thin;
+}
+
 .lists {
   margin: 0.25rem 0 1.25rem;
 }

src/components/views/panel/PanelLinks.vue

@@ -146,5 +146,11 @@ const links = computed(() => {
 </script>
 
 <template>
-  <TextField :label="i18n('links')" :values="links" :skeleton="{ width: '3rem' }" array />
+  <TextField
+    :label="i18n('links')"
+    :values="links"
+    :skeleton="{ width: '3rem' }"
+    array
+    wrap
+  />
 </template>

src/components/views/panel/ShowPanelDetails.vue

@@ -182,14 +182,15 @@ const title = computed(() =>
 </script>
 
 <template>
-  <NFlex size="large" class="container" vertical>
-    <NFlex vertical size="large">
+  <NFlex size="large" class="container" vertical wrap>
+    <NFlex class="link-row" vertical size="large" wrap>
       <!--  Genres  -->
       <TextField
         :label="i18n('genres')"
         :values="genres"
         :skeleton="{ width: '3rem' }"
         array
+        wrap
       />
 
       <!--  links  -->
@@ -315,6 +316,11 @@ const title = computed(() =>
   width: 100%;
 }
 
+.link-row {
+  overflow-x: auto;
+  scrollbar-width: thin;
+}
+
 @media (width < 700px) {
   .row {
     gap: 0.75rem 0.5rem !important;