Improve responsiveness of DatasetView header

dataset name takes priority for horizontal space and state will now kick
to a second line when needed.

Author: dannon

client/src/components/Dataset/DatasetView.vue

@@ -97,14 +97,18 @@ watch(
                     separator
                     inline
                     size="lg"
-                    class="flex-grow-1 d-flex flex-wrap align-items-center"
+                    class="flex-grow-1"
                     :collapse="headerState"
                     @click="toggleHeaderCollapse">
-                    <span class="dataset-hid">{{ dataset?.hid }}:</span>
-                    <span class="dataset-name font-weight-bold">{{ dataset?.name }}</span>
-                    <span class="dataset-state-header">
-                        <DatasetState :dataset-id="datasetId" />
-                    </span>
+                    <div class="dataset-header-content">
+                        <div class="dataset-title-row">
+                            <span class="dataset-hid">{{ dataset?.hid }}:</span>
+                            <span class="dataset-name font-weight-bold">{{ dataset?.name }}</span>
+                        </div>
+                        <span class="dataset-state-header">
+                            <DatasetState :dataset-id="datasetId" />
+                        </span>
+                    </div>
                 </Heading>
             </div>
             <transition v-if="dataset" name="header">
@@ -277,21 +281,34 @@ watch(
     opacity: 0;
 }
 
+.dataset-header-content {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0.5rem;
+}
+
+.dataset-title-row {
+    display: flex;
+    align-items: baseline;
+    min-width: 0; // Allow to shrink below content
+    flex: 1 1 auto; // Allow to grow and shrink
+}
+
 .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
+    min-width: 0; // Allow text to wrap
 }
 
 .dataset-state-header {
     font-size: $h5-font-size;
-    vertical-align: middle;
-    margin-left: 0.5rem;
-    flex-shrink: 0; // Prevent state badge from shrinking
+    flex: 0 0 auto; // Don't grow or shrink
+    white-space: nowrap; // Prevent state badge from wrapping internally
 }
 
 .tab-content-panel {