Commit b0898486 authored by Dannon Baker's avatar Dannon Baker
Browse files

Improve responsiveness of DatasetView header 

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

client/src/components/Dataset/DatasetView.vue

+27 −10
Original line number Diff line number Diff line
@@ -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">

                    <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,6 +281,20 @@ 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;
@@ -284,14 +302,13 @@ watch( 


.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 {