fix(panel): rework wording and fix overflow issues

Author: dvcol

src/components/common/typography/TextField.vue

@@ -15,7 +15,6 @@ defineProps({
   labelWidth: {
     type: String,
     required: false,
-    default: '2.5rem',
   },
   value: {
     type: [String, Number, Boolean],
@@ -90,7 +89,7 @@ const { openTab } = useLinksStore();
       <span class="prefix">{{ label }}</span>
     </slot>
     <slot>
-      <NFlex v-if="array" class="value" wrap>
+      <NFlex v-if="array" wrap align="center">
         <template v-if="values !== undefined">
           <TagLinkComponent
             v-for="(tag, i) of values"
@@ -117,7 +116,7 @@ const { openTab } = useLinksStore();
 .prefix {
   flex: 0 0 auto;
   align-self: center;
-  min-width: var(--prefix-min-width);
+  min-width: var(--prefix-min-width, 4rem);
   color: var(--white-50);
   font-weight: 600;
   transition: color 0.3s var(--n-bezier);
@@ -142,6 +141,10 @@ const { openTab } = useLinksStore();
 
   &.vertical {
     width: 100%;
+
+    .prefix {
+      min-width: var(--prefix-min-width, max-content);
+    }
   }
 
   &:hover .prefix {
@@ -155,6 +158,11 @@ const { openTab } = useLinksStore();
   &.array {
     flex: 1 1 auto;
     width: 100%;
+    min-width: fit-content;
+
+    .prefix {
+      align-self: baseline;
+    }
   }
 
   .pre {

src/components/views/panel/MoviePanelDetails.vue

@@ -121,21 +121,29 @@ const movieTitle = computed(() => deCapitalise(movie?.value?.title));
       :placeholder="movieTitle"
     />
     <NFlex class="row" size="large">
-      <!--  Release date  -->
-      <TextField
-        :label="i18n('released')"
-        :value="releasedDate"
-        :skeleton="{ width: '5.125rem' }"
-      />
-
       <!--  Year  -->
       <TextField :label="i18n('year')" :value="year" :skeleton="{ width: '2.25rem' }" />
 
       <!--  Country  -->
       <TextField :label="i18n('country')" :value="country" :skeleton="{ width: '2ch' }" />
+
+      <!--  Status  -->
+      <TextField
+        :label="i18n('status')"
+        :value="status"
+        :skeleton="{ width: '7.5rem' }"
+        grow
+      />
     </NFlex>
 
     <NFlex class="row" size="large">
+      <!--  Release date  -->
+      <TextField
+        :label="i18n('released')"
+        :value="releasedDate"
+        :skeleton="{ width: '5.125rem' }"
+      />
+
       <!--  Release Time  -->
       <TextField
         :label="i18n('released_time')"
@@ -149,14 +157,6 @@ const movieTitle = computed(() => deCapitalise(movie?.value?.title));
         :value="runtime"
         :skeleton="{ width: '3.75rem' }"
       />
-
-      <!--  Status  -->
-      <TextField
-        :label="i18n('status')"
-        :value="status"
-        :skeleton="{ width: '7.5rem' }"
-        grow
-      />
     </NFlex>
 
     <NFlex v-if="watchedDate" class="row" size="large">

src/components/views/panel/PanelLinks.vue

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

src/components/views/panel/ShowPanelDetails.vue

@@ -190,7 +190,6 @@ const title = computed(() =>
         :values="genres"
         :skeleton="{ width: '3rem' }"
         array
-        wrap
       />
 
       <!--  links  -->
@@ -224,20 +223,21 @@ const title = computed(() =>
     </NFlex>
 
     <NFlex class="row" size="large">
-      <!--  Air date  -->
-      <TextField
-        :label="i18n('aired')"
-        :value="airedDate"
-        :skeleton="{ width: '5.125rem' }"
-      />
-
       <!--  Runtime  -->
       <TextField
         :label="i18n('runtime')"
         :value="runtime"
         :skeleton="{ width: '3.75rem' }"
       />
 
+      <!--  Season aired episodes  -->
+      <TextField
+        v-if="mode !== 'show'"
+        :label="i18n('aired_episodes')"
+        :value="airedEpisodes"
+        :skeleton="{ width: '3rem' }"
+      />
+
       <!--  Show Status  -->
       <TextField
         :label="i18n('status')"
@@ -248,19 +248,18 @@ const title = computed(() =>
     </NFlex>
 
     <NFlex class="row" size="large">
-      <!--  Air Time  -->
+      <!--  Air date  -->
       <TextField
-        :label="i18n('aired_time')"
-        :value="airedTime"
+        :label="i18n('aired')"
+        :value="airedDate"
         :skeleton="{ width: '5.125rem' }"
       />
 
-      <!--  Season aired episodes  -->
+      <!--  Air Time  -->
       <TextField
-        v-if="mode !== 'show'"
-        :label="i18n('aired_episodes')"
-        :value="airedEpisodes"
-        :skeleton="{ width: '3rem' }"
+        :label="i18n('aired_time')"
+        :value="airedTime"
+        :skeleton="{ width: '5.125rem' }"
       />
 
       <!--  Episode Type  -->

src/i18n/en/panel/panel-detail.json

@@ -56,7 +56,7 @@
     "description": "Runtime label in the panel detail"
   },
   "panel__detail__aired_episodes": {
-    "message": "Aired Episodes",
+    "message": "Episodes",
     "description": "Season Aired Episodes label in the panel detail"
   },
   "panel__detail__type": {