DatasetView header display improvements for small screens

Use shorter names for state tag (only in datasetview currently)
add a tooltip with the full state description
Try to adjust wrapping for smaller screens.

Author: dannon

client/src/components/Dataset/DatasetState.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 
 import { STATES } from "@/components/History/Content/model/states";
 import { useDatasetStore } from "@/stores/datasetStore";
 
+import GTooltip from "@/components/BaseComponents/GTooltip.vue";
+
 const datasetStore = useDatasetStore();
 
 const props = defineProps<{
@@ -24,13 +26,37 @@ const contentCls = computed(() => {
         return `alert-${status}`;
     }
 });
+
+// Compute short display text - capitalize the state name
+const displayText = computed(() => {
+    if (!dataset.value) {
+        return "n/a";
+    }
+    const state = dataset.value.state;
+    if (!state) {
+        return "n/a";
+    }
+
+    // Capitalize first letter and replace underscores with spaces
+    return state.charAt(0).toUpperCase() + state.slice(1).replace(/_/g, " ");
+});
+
+// Get the full descriptive text for tooltip
+const tooltipText = computed(() => {
+    return contentState.value?.text || null;
+});
+
+// Ref for the state badge element
+const stateBadgeRef = ref<HTMLElement | null>(null);
 </script>
 
 <template>
-    <span v-if="dataset && contentState" class="rounded px-2 py-1 ml-2" :class="contentCls">
+    <span v-if="dataset && contentState" ref="stateBadgeRef" class="rounded px-2 py-1 ml-2" :class="contentCls">
         <span v-if="contentState.icon" class="mr-1">
             <FontAwesomeIcon fixed-width :icon="contentState.icon" :spin="contentState.spin" />
         </span>
-        {{ contentState.text || dataset.state || "n/a" }}
+        {{ displayText }}
+
+        <GTooltip v-if="tooltipText" :reference="stateBadgeRef" :text="tooltipText" />
     </span>
 </template>

client/src/components/Dataset/DatasetView.vue

@@ -97,7 +97,7 @@ watch(
                     separator
                     inline
                     size="lg"
-                    class="flex-grow-1"
+                    class="flex-grow-1 d-flex flex-wrap align-items-center"
                     :collapse="headerState"
                     @click="toggleHeaderCollapse">
                     <span class="dataset-hid">{{ dataset?.hid }}:</span>
@@ -277,23 +277,21 @@ watch(
     opacity: 0;
 }
 
-.dataset-hid,
-.dataset-state-header {
-    white-space: nowrap;
-}
-
 .dataset-hid {
+    white-space: nowrap;
     margin-right: 0.25rem;
 }
 
 .dataset-name {
     word-break: break-word;
+    min-width: 0; // Allow flex item to shrink below content size
 }
 
 .dataset-state-header {
     font-size: $h5-font-size;
     vertical-align: middle;
     margin-left: 0.5rem;
+    flex-shrink: 0; // Prevent state badge from shrinking
 }
 
 .tab-content-panel {