Fix drilldown header height (#2360)

Co-authored-by: Cole Blanchard <cblanchard@Coles-MacBook-Pro.local>
DARPA-ASKEM · Dec 4, 2023 · d0bcc58 · d0bcc58
1 parent 90e5f7e
commit d0bcc58
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/packages/client/hmi-client/src/assets/css/theme/_variables.scss b/packages/client/hmi-client/src/assets/css/theme/_variables.scss
@@ -953,5 +953,4 @@ $petri-inputBox: var(--surface-0);
 	--node-header-hover: var(--text-color-subdued);
 	--z-index-modal: 1000;
 	--keyboard-zindex: calc(var(--z-index-modal) + 100);
-	--drilldown-header-height: 116px;
 }
diff --git a/packages/client/hmi-client/src/components/drilldown/tera-drilldown-header.vue b/packages/client/hmi-client/src/components/drilldown/tera-drilldown-header.vue
@@ -3,6 +3,9 @@
 		<div class="title-row">
 			<h4><slot /> <i v-if="props.tooltip" v-tooltip="tooltip" class="pi pi-info-circle" /></h4>
 
+			<a v-if="views.length <= 1" :href="documentationUrl" rel="noopener noreferrer"
+				>Documentation</a
+			>
 			<Button
 				class="close-mask"
 				icon="pi pi-times"
@@ -16,7 +19,9 @@
 			<TabView v-if="views.length > 1" :active-index="activeIndex" @tab-change="onTabChange">
 				<TabPanel v-for="(view, index) in views" :key="index" :header="view" />
 			</TabView>
-			<a :href="documentationUrl" rel="noopener noreferrer">Documentation</a>
+			<a v-if="views.length > 1" :href="documentationUrl" rel="noopener noreferrer"
+				>Documentation</a
+			>
 		</div>
 	</header>
 </template>
@@ -48,7 +53,6 @@ header {
 	padding-top: 1.25rem;
 	padding-left: 1rem;
 	padding-right: 1rem;
-	height: var(--drilldown-header-height);
 }
 
 header > * {
@@ -75,7 +79,7 @@ header .tabs-row:deep(.p-tabview .p-tabview-panels) {
 	padding: 0;
 }
 
-.tabs-row > a {
+a {
 	height: 3rem;
 	display: flex;
 	align-items: center;

diff --git a/packages/client/hmi-client/src/components/drilldown/tera-drilldown.vue b/packages/client/hmi-client/src/components/drilldown/tera-drilldown.vue
@@ -84,6 +84,7 @@ than the main application behind the modal when these render issues come, howeve
 	border-radius: var(--modal-border-radius);
 	display: flex;
 	flex-direction: column;
+	overflow: hidden;
 }
 
 main {