Jamie model card small formatting tweaks

packages/client/hmi-client/src/components/asset/tera-asset.vue

@@ -214,14 +214,12 @@ header {
 }
 
 header.shrinked {
-	height: 3rem;
 	position: sticky;
 	top: 0px;
 	z-index: 100;
 	isolation: isolate;
 	background-color: var(--surface-ground-transparent);
 	backdrop-filter: blur(6px);
-	padding: var(--gap-small) var(--gap);
 	border-bottom: 1px solid var(--surface-border-light);
 }
 
@@ -231,7 +229,7 @@ header.shrinked h4 {
 	text-align: left;
 	text-overflow: ellipsis;
 	white-space: nowrap;
-	max-width: var(--constrain-width);
+	max-width: fit-content;
 }
 
 h4,
@@ -244,7 +242,6 @@ header aside {
 	display: flex;
 	flex-direction: column;
 	gap: var(--gap-small);
-	max-width: var(--constrain-width);
 }
 
 header aside {

packages/client/hmi-client/src/components/model/petrinet/tera-model-description.vue

@@ -6,72 +6,100 @@
 					<tera-show-more-text :text="description" :lines="5" />
 
 					<template v-if="modelType">
-						<label class="p-text-secondary">Model type</label>
-						<p>{{ modelType }}</p>
+						<div class="label-value-pair">
+							<label class="p-text-secondary">Model type</label>
+							<p>{{ modelType }}</p>
+						</div>
 					</template>
 					<template v-if="fundedBy">
-						<label class="p-text-secondary">Funded by</label>
-						<p>{{ fundedBy }}</p>
+						<div class="label-value-pair">
+							<label class="p-text-secondary">Funded by</label>
+							<p>{{ fundedBy }}</p>
+						</div>
 					</template>
 					<template v-if="authors">
-						<label class="p-text-secondary">Authors</label>
-						<p>{{ authors }}</p>
+						<div class="label-value-pair">
+							<label class="p-text-secondary">Authors</label>
+							<p>{{ authors }}</p>
+						</div>
 					</template>
 					<template v-if="uses">
-						<h5>Uses</h5>
-						<label class="p-text-secondary">Direct use</label>
-						<p>{{ uses.DirectUse }}</p>
-						<label class="p-text-secondary">Out of scope use</label>
-						<p>{{ uses.OutOfScopeUse }}</p>
+						<div class="label-value-pair mt-2">
+							<h6>Uses</h6>
+							<label class="p-text-secondary">Direct use</label>
+							<p>{{ uses.DirectUse }}</p>
+						</div>
+						<div class="label-value-pair">
+							<label class="p-text-secondary">Out of scope use</label>
+							<p>{{ uses.OutOfScopeUse }}</p>
+						</div>
 					</template>
 
 					<template v-if="biasAndRiskLimitations">
-						<h5>Bias and Risk Limitations</h5>
-						<p>{{ biasAndRiskLimitations }}</p>
+						<div class="label-value-pair mt-2">
+							<h6>Bias and Risk Limitations</h6>
+							<p>{{ biasAndRiskLimitations }}</p>
+						</div>
 					</template>
 
 					<template v-if="evaluation">
-						<h5>Evaluation</h5>
-						<p>{{ evaluation }}</p>
+						<div class="label-value-pair mt-2">
+							<h6>Evaluation</h6>
+							<p>{{ evaluation }}</p>
+						</div>
 					</template>
 
 					<template v-if="technicalSpecifications">
-						<h5>Technical Specifications</h5>
-						<p>{{ technicalSpecifications }}</p>
+						<div class="label-value-pair mt-2">
+							<h6>Technical Specifications</h6>
+							<p>{{ technicalSpecifications }}</p>
+						</div>
 					</template>
 
 					<template v-if="!isEmpty(glossary)">
-						<h5>Glossary</h5>
-						<p>{{ glossary.join(', ') }}</p>
+						<div class="label-value-pair mt-2">
+							<h6>Glossary</h6>
+							<p>{{ glossary.join(', ') }}</p>
+						</div>
 					</template>
 
 					<template v-if="!isEmpty(moreInformation)">
-						<h5>More Information</h5>
-						<a
-							v-for="(link, index) in moreInformation"
-							:href="link"
-							target="_blank"
-							rel="noopener noreferrer"
-							:key="index"
-							>{{ link }}</a
-						>
+						<div class="label-value-pair mt-2">
+							<h6>More Information</h6>
+							<a
+								v-for="(link, index) in moreInformation"
+								:href="link"
+								target="_blank"
+								rel="noopener noreferrer"
+								:key="index"
+								>{{ link }}</a
+							>
+						</div>
 					</template>
 
 					<template v-if="!isEmpty(provenance)">
-						<h5>Provenance</h5>
-						<p v-html="provenance" />
+						<div class="label-value-pair mt-2">
+							<h6>Provenance</h6>
+							<p v-html="provenance" />
+						</div>
 					</template>
 					<template v-if="!isEmpty(schema)">
-						<h5>Schema</h5>
-						<p v-html="schema" />
+						<div class="label-value-pair mt-2">
+							<h6>Schema</h6>
+							<p v-html="schema" />
+						</div>
 					</template>
 					<template v-if="!isEmpty(sourceDataset)">
-						<h5>Source dataset</h5>
-						<p v-html="sourceDataset" />
+						<div class="label-value-pair mt-2">
+							<h6>Source dataset</h6>
+							<p v-html="sourceDataset" />
+						</div>
 					</template>
 					<template v-if="!isEmpty(usage)">
-						<h5>Usage</h5>
-						<p v-html="usage" />
+						<div class="label-value-pair mt-2">
+							<h6>Usage</h6>
+							<p v-html="usage" />
+						</div>
 					</template>
 				</section>
 			</AccordionTab>
@@ -283,13 +311,17 @@ function updateConfiguration(updatedConfiguration: ModelConfiguration) {
 	gap: 0.5rem;
 	margin-left: 1.5rem;
 }
-
 .details-column {
 	display: flex;
 	flex-direction: column;
 	gap: var(--gap-small);
 }
 
+.label-value-pair {
+	display: flex;
+	flex-direction: column;
+	gap: 0rem;
+}
 .framework {
 	text-transform: capitalize;
 }

packages/client/hmi-client/src/components/widgets/tera-show-more-text.vue

@@ -7,7 +7,7 @@
 		>
 			<div v-html="text"></div>
 		</div>
-		<span v-if="text > ''" @click="collapseOrExpand">
+		<span v-if="text > '' && (triggerShowMore || expanded)" @click="collapseOrExpand">
 			<template v-if="triggerShowMore">Show more</template>
 			<template v-if="expanded">Show less</template>
 		</span>