From 1f4ab90a0611f817e5046f25b1784e0aadd3202f Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Fri, 13 Sep 2024 12:48:45 -0400
Subject: [PATCH 1/5] create input config rule

---
 .../components/widgets/tera-slider-panel.vue  | 29 ++++++++++++++-----
 .../tera-calibrate-ciemss-drilldown.vue       | 22 ++++----------
 .../workflow/ops/funman/tera-funman.vue       | 26 ++++-------------
 .../tera-model-config-drilldown.vue           | 15 ++++------
 .../tera-optimize-ciemss-drilldown.vue        | 24 ++++-----------
 .../tera-simulate-ciemss-drilldown.vue        | 22 ++++----------
 6 files changed, 52 insertions(+), 86 deletions(-)

diff --git a/packages/client/hmi-client/src/components/widgets/tera-slider-panel.vue b/packages/client/hmi-client/src/components/widgets/tera-slider-panel.vue
index 3818b1546a..1b1a61e927 100644
--- a/packages/client/hmi-client/src/components/widgets/tera-slider-panel.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-slider-panel.vue
@@ -93,6 +93,10 @@ const onScroll = (event: Event) => {
 </script>
 
 <style scoped>
+aside {
+	height: 100%;
+}
+
 header {
 	position: sticky;
 	top: 0;
@@ -104,20 +108,27 @@ header {
 	padding: var(--gap-2);
 	padding-left: var(--gap);
 	gap: var(--gap);
-	background-color: rgba(255, 255, 255, 0.8);
-	backdrop-filter: blur(3px);
 	&.shadow {
 		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
 	}
 }
 
-aside {
-	height: 100%;
-	overflow-y: auto;
+header:not(.tab) {
+	background-color: rgba(255, 255, 255, 0.8);
+	backdrop-filter: blur(3px);
 }
 
-.p-button.p-button-icon-only.p-button-rounded {
-	height: 2.5rem;
+/* Makes the slider light grey - apply this class to this component when needed */
+.input-config {
+	& header {
+		background: color-mix(in srgb, var(--surface-100) 80%, transparent 20%);
+	}
+
+	& :deep(.slider-content),
+	& :deep(.slider-tab) {
+		background-color: var(--surface-100);
+		border-right: 1px solid var(--surface-border-light);
+	}
 }
 
 .tab {
@@ -129,6 +140,10 @@ h5 {
 	writing-mode: vertical-lr;
 }
 
+.p-button.p-button-icon-only.p-button-rounded {
+	height: 2.5rem;
+}
+
 .p-badge {
 	background-color: var(--surface-200);
 	color: var(--text-color-primary);
diff --git a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
index 62eefe59fc..d8adcb25c3 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
@@ -7,7 +7,12 @@
 	>
 		<!-- Wizard -->
 		<section :tabName="DrilldownTabs.Wizard" class="wizard">
-			<tera-slider-panel v-model:is-open="isSidebarOpen" header="Calibration settings" content-width="420px">
+			<tera-slider-panel
+				class="input-config"
+				v-model:is-open="isSidebarOpen"
+				header="Calibration settings"
+				content-width="420px"
+			>
 				<template #content>
 					<div class="toolbar">
 						<p>Click Run to begin calibrating.</p>
@@ -992,21 +997,6 @@ watch(
 </script>
 
 <style scoped>
-/* Left sidebar stuff */
-:deep(.slider-content) {
-	background-color: var(--surface-100);
-	border-right: 1px solid var(--surface-border-light);
-}
-:deep(.slider-content aside header) {
-	background: color-mix(in srgb, var(--surface-100) 80%, transparent 20%);
-}
-:deep(.slider-tab) {
-	background-color: var(--surface-100);
-	border-right: 1px solid var(--surface-border-light);
-}
-:deep(.slider-tab header) {
-	background: transparent;
-}
 .wizard .toolbar {
 	display: flex;
 	align-items: center;
diff --git a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman.vue b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman.vue
index 1d12050d19..1474870e7d 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman.vue
@@ -6,7 +6,12 @@
 		@update-state="(state: any) => emit('update-state', state)"
 	>
 		<div :tabName="FunmanTabs.Wizard">
-			<tera-slider-panel v-model:is-open="isSliderOpen" header="Validate configuration settings" content-width="515px">
+			<tera-slider-panel
+				class="input-config"
+				v-model:is-open="isSliderOpen"
+				header="Validate configuration settings"
+				content-width="515px"
+			>
 				<template #content>
 					<div class="top-toolbar">
 						<p>Set your model checks and settings then click run.</p>
@@ -613,25 +618,6 @@ div.section-row.timespan > div > span {
 	grid-template-columns: auto 1fr;
 }
 
-/* Make the slider light grey */
-:deep(.slider-content) {
-	background-color: var(--surface-100);
-	border-right: 1px solid var(--surface-border-light);
-}
-
-:deep(.slider-content header) {
-	background: transparent;
-}
-
-:deep(.slider-tab) {
-	background-color: var(--surface-100);
-	border-right: 1px solid var(--surface-border-light);
-}
-
-:deep(.slider-tab header) {
-	background: transparent;
-}
-
 .top-toolbar {
 	display: flex;
 	align-items: center;
diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue
index 257c17a255..50e9585768 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue
@@ -7,7 +7,12 @@
 		hide-dropdown
 	>
 		<template #sidebar>
-			<tera-slider-panel v-model:is-open="isSidebarOpen" header="Configurations" content-width="360px">
+			<tera-slider-panel
+				class="input-config"
+				v-model:is-open="isSidebarOpen"
+				header="Configurations"
+				content-width="360px"
+			>
 				<template #content>
 					<div class="m-3">
 						<div class="flex flex-row gap-1">
@@ -722,14 +727,6 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-/* Make left sidebar grey */
-:deep(.slider-content) {
-	background-color: var(--surface-100);
-}
-:deep(.slider-content aside header) {
-	background: color-mix(in srgb, var(--surface-100) 80%, transparent 20%);
-}
-
 .processing-new-configuration-tile {
 	display: flex;
 	flex-direction: row;
diff --git a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss-drilldown.vue
index c2f177c53a..c2b5ef7c7c 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/optimize-ciemss/tera-optimize-ciemss-drilldown.vue
@@ -8,7 +8,12 @@
 	>
 		<!-- Wizard tab -->
 		<section :tabName="DrilldownTabs.Wizard" class="wizard">
-			<tera-slider-panel v-model:is-open="isSidebarOpen" header="Optimize intervention settings" content-width="420px">
+			<tera-slider-panel
+				class="input-config"
+				v-model:is-open="isSidebarOpen"
+				header="Optimize intervention settings"
+				content-width="420px"
+			>
 				<template #content>
 					<div class="toolbar">
 						<p>Click Run to start optimization.</p>
@@ -1104,23 +1109,6 @@ watch(
 </script>
 
 <style scoped>
-/* Left sidebar styles */
-:deep(.slider-content) {
-	background-color: var(--surface-100);
-	border-right: 1px solid var(--surface-border-light);
-	height: auto;
-	padding-bottom: 7rem;
-}
-:deep(.slider-content aside header) {
-	background: color-mix(in srgb, var(--surface-100) 80%, transparent 20%);
-}
-:deep(.slider-tab) {
-	background-color: var(--surface-100);
-	border-right: 1px solid var(--surface-border-light);
-}
-:deep(.slider-tab header) {
-	background: transparent;
-}
 .wizard .toolbar {
 	display: flex;
 	align-items: center;
diff --git a/packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-ciemss-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-ciemss-drilldown.vue
index 6907b821c0..9079656ff8 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-ciemss-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-ciemss-drilldown.vue
@@ -9,7 +9,12 @@
 	>
 		<!-- Wizard -->
 		<section :tabName="DrilldownTabs.Wizard" class="wizard">
-			<tera-slider-panel v-model:is-open="isSidebarOpen" header="Simulation settings" content-width="420px">
+			<tera-slider-panel
+				class="input-config"
+				v-model:is-open="isSidebarOpen"
+				header="Simulation settings"
+				content-width="420px"
+			>
 				<template #content>
 					<div class="toolbar">
 						<p>Click Run to start the simulation.</p>
@@ -566,21 +571,6 @@ onUnmounted(() => kernelManager.shutdown());
 </script>
 
 <style scoped>
-/* Make left sidebar grey */
-:deep(.slider-content) {
-	background-color: var(--surface-100);
-	border-right: 1px solid var(--surface-border-light);
-}
-:deep(.slider-content aside header) {
-	background: color-mix(in srgb, var(--surface-100) 80%, transparent 20%);
-}
-:deep(.slider-tab) {
-	background-color: var(--surface-100);
-	border-right: 1px solid var(--surface-border-light);
-}
-:deep(.slider-tab header) {
-	background: transparent;
-}
 .wizard .toolbar {
 	display: flex;
 	align-items: center;

From 4cd8deaac3052663cb66363f24416fdff57c4aa1 Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Fri, 13 Sep 2024 13:24:22 -0400
Subject: [PATCH 2/5] padding

---
 .../src/components/widgets/tera-slider-panel.vue          | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/client/hmi-client/src/components/widgets/tera-slider-panel.vue b/packages/client/hmi-client/src/components/widgets/tera-slider-panel.vue
index 1b1a61e927..588f5eee9b 100644
--- a/packages/client/hmi-client/src/components/widgets/tera-slider-panel.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-slider-panel.vue
@@ -12,7 +12,9 @@
 					/>
 					<h4>{{ header }}</h4>
 				</header>
-				<slot name="content" />
+				<div class="content-wrapper">
+					<slot name="content" />
+				</div>
 			</aside>
 			<slot name="overlay" />
 		</template>
@@ -124,6 +126,10 @@ header:not(.tab) {
 		background: color-mix(in srgb, var(--surface-100) 80%, transparent 20%);
 	}
 
+	& .content-wrapper {
+		padding-bottom: 7rem;
+	}
+
 	& :deep(.slider-content),
 	& :deep(.slider-tab) {
 		background-color: var(--surface-100);

From b5d23c26f2e4828d1fac7f543214c9d89e37b065 Mon Sep 17 00:00:00 2001
From: Brittany Kondo <bkondo@brittanys-mbp.home>
Date: Fri, 13 Sep 2024 13:41:37 -0400
Subject: [PATCH 3/5] remove unused spacers

---
 .../hmi-client/src/components/widgets/tera-slider-panel.vue | 2 +-
 .../calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue    | 1 -
 .../src/components/workflow/ops/funman/tera-funman.vue      | 6 ------
 3 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/client/hmi-client/src/components/widgets/tera-slider-panel.vue b/packages/client/hmi-client/src/components/widgets/tera-slider-panel.vue
index 560a9968b7..602d989a15 100644
--- a/packages/client/hmi-client/src/components/widgets/tera-slider-panel.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-slider-panel.vue
@@ -137,7 +137,7 @@ header:not(.tab) {
 	}
 
 	& .content-wrapper {
-		padding-bottom: 7rem;
+		padding-bottom: 4rem;
 	}
 
 	& :deep(.slider-content),
diff --git a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
index e99edb91a2..e8021fb6b1 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
@@ -164,7 +164,6 @@
 							</div>
 						</div>
 					</section>
-					<div class="spacer m-7" />
 				</template>
 			</tera-slider-panel>
 		</section>
diff --git a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman.vue b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman.vue
index 1474870e7d..e290b1a28b 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman.vue
@@ -89,7 +89,6 @@
 							</AccordionTab>
 						</Accordion>
 					</main>
-					<div class="spacer m-7" />
 				</template>
 			</tera-slider-panel>
 		</div>
@@ -584,11 +583,6 @@ div.section-row.timespan > div > span {
 	width: 100%;
 }
 
-.spacer {
-	margin-top: 1rem;
-	margin-bottom: 1rem;
-}
-
 .add-constraint-spacer {
 	margin-top: 0.5rem;
 	margin-bottom: 2rem;

From d6622c42d2675e392ffcf81555cb172dd9820249 Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Fri, 13 Sep 2024 14:02:42 -0400
Subject: [PATCH 4/5] s

---
 .../hmi-client/src/components/widgets/tera-slider-panel.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/hmi-client/src/components/widgets/tera-slider-panel.vue b/packages/client/hmi-client/src/components/widgets/tera-slider-panel.vue
index 560a9968b7..7f5bb6895e 100644
--- a/packages/client/hmi-client/src/components/widgets/tera-slider-panel.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-slider-panel.vue
@@ -157,7 +157,7 @@ h5 {
 }
 
 .p-button.p-button-icon-only.p-button-rounded {
-	height: 2.5rem;
+	height: var(--gap-10);
 }
 
 .p-badge {

From 730a7230ec02c374dff2bbab9bd824484093860f Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Fri, 13 Sep 2024 14:26:25 -0400
Subject: [PATCH 5/5] flex 1

---
 .../hmi-client/src/components/widgets/tera-slider-panel.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/client/hmi-client/src/components/widgets/tera-slider-panel.vue b/packages/client/hmi-client/src/components/widgets/tera-slider-panel.vue
index 9ec9d2fa4d..e78b1a926f 100644
--- a/packages/client/hmi-client/src/components/widgets/tera-slider-panel.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-slider-panel.vue
@@ -106,6 +106,8 @@ const onScroll = (event: Event) => {
 
 <style scoped>
 aside {
+	display: flex;
+	flex-direction: column;
 	height: 100%;
 }
 
@@ -130,6 +132,10 @@ header:not(.tab) {
 	backdrop-filter: blur(3px);
 }
 
+.content-wrapper {
+	flex: 1;
+}
+
 /* Makes the slider light grey - apply this class to this component when needed */
 .input-config {
 	& header {