From 1122d06733717438835a24cf90569f6c915c2d6b Mon Sep 17 00:00:00 2001
From: Ramiro Medina <ramiro.a.medina@gmail.com>
Date: Thu, 25 Jan 2024 21:32:51 +0000
Subject: [PATCH] Simplified to single layer, removed width support

---
 ui/src/core_components/base/BaseContainer.vue | 50 +++++++++----------
 1 file changed, 23 insertions(+), 27 deletions(-)

diff --git a/ui/src/core_components/base/BaseContainer.vue b/ui/src/core_components/base/BaseContainer.vue
index cd700673b..57a052a1e 100644
--- a/ui/src/core_components/base/BaseContainer.vue
+++ b/ui/src/core_components/base/BaseContainer.vue
@@ -1,42 +1,41 @@
 <template>
-	<div class="containerWrapper" :style="containerWrapperStyle">
-		<div class="container" :class="{horizontal: props.horizontal === true}" data-streamsync-container :style="containerStyle">
-			<slot></slot>
-		</div>
+	<div
+		class="BaseContainer"
+		:style="rootStyle"
+		:class="{ horizontal: props.isHorizontal }"
+		data-streamsync-container
+	>
+		<slot></slot>
 	</div>
-
 </template>
 
 <script setup lang="ts">
-
-import {computed} from "vue";
+import { computed } from "vue";
 
 const props = defineProps<{
-	contentWidth: string;
 	contentHAlign: string;
+	contentVAlign?: string;
 	contentPadding: string;
-	horizontal?: boolean;
+	isHorizontal?: boolean;
 }>();
 
-const containerStyle = computed(() => {
-	if (props.horizontal === true) {
+const rootStyle = computed(() => {
+	const baseStyle = {
+		padding: props.contentPadding,
+	};
+
+	if (props.isHorizontal) {
 		return {
-			width: props.contentWidth,
+			...baseStyle,
 			justifyContent: props.contentHAlign,
-			padding: props.contentPadding,
+			alignItems: props.contentVAlign,
 		};
 	}
 
 	return {
-		width: props.contentWidth,
+		...baseStyle,
 		alignItems: props.contentHAlign,
-		padding: props.contentPadding,
-	};
-});
-
-const containerWrapperStyle = computed(() => {
-	return {
-		justifyContent: props.contentHAlign,
+		justifyContent: props.contentVAlign,
 	};
 });
 </script>
@@ -44,11 +43,8 @@ const containerWrapperStyle = computed(() => {
 <style scoped>
 @import "../../renderer/sharedStyles.css";
 
-.containerWrapper {
+.BaseContainer {
 	display: flex;
+	width: 100%;
 }
-
-.container {
-	flex-wrap: wrap;
-}
-</style>
\ No newline at end of file
+</style>