refactor: replaced height variables with flexbox

bigbite · Aug 5, 2024 · b4f0d5b · b4f0d5b
1 parent 7fc5c0b
commit b4f0d5b
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 21 deletions.
diff --git a/src/admin/styles/components/addSettingPanel.scss b/src/admin/styles/components/addSettingPanel.scss
@@ -1,8 +1,9 @@
 .add-settings-panel {
 	min-width: 350px;
-	max-width: 350px;
 	background-color: #fff;
 	z-index: 1;
+	display: flex;
+	flex-direction: column;
 }
 
 .add-settings-panel__header {
@@ -11,20 +12,20 @@
 	align-items: center;
 	padding: 10px 15px;
 	border-bottom: 1px solid #e5e5e5;
-	margin-bottom: 15px;
-}
-
-.add-settings-panel__body {
-	padding: 0 20px;
-	flex-grow: 1;
-	overflow: hidden;
-	overflow-y: auto;
 }
 
 .add-setting-panel__form {
+	flex-grow: 1;
 	display: flex;
 	flex-direction: column;
-	height: var(--add-setting-panel-form-height);
+	min-height: 0;
+}
+
+.add-settings-panel__body {
+	padding: 20px;
+	flex-grow: 1;
+	min-height: 0;
+	overflow-y: auto;
 }
 
 .add-settings-panel__footer {

diff --git a/src/admin/styles/components/fieldConfigurator.scss b/src/admin/styles/components/fieldConfigurator.scss
@@ -1,6 +1,5 @@
 .field-config {
 	padding: 5px;
-	margin-bottom: 15px;
 }
 
 .field-config__options {

diff --git a/src/admin/styles/components/navigationPanel.scss b/src/admin/styles/components/navigationPanel.scss
@@ -1,6 +1,5 @@
 .navigation-panel {
-	min-width: 350px;
-	max-width: 350px;
+	min-width: 250px;
 	background-color: #fff;
 	display: flex;
 	flex-direction: column;

diff --git a/src/admin/styles/components/settingsContainer.scss b/src/admin/styles/components/settingsContainer.scss
@@ -1,6 +1,9 @@
 .settings-container {
 	background-color: #fff;
 	flex-grow: 1;
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
 }
 
 .settings-container__header {
@@ -20,8 +23,8 @@
 	padding: 20px;
 	display: flex;
 	flex-direction: column;
-	height: var(--settings-body-container-height);
-	overflow: hidden;
+	flex-grow: 1;
+	min-height: 0;
 	overflow-y: auto;
 }
 

diff --git a/src/admin/styles/variables.scss b/src/admin/styles/variables.scss
@@ -2,11 +2,5 @@
 	// Browser height minus top bar height
 	--site-settings-body-height: calc(100dvh - 32px);
 
-	// Panel height minus header height
-	--add-setting-panel-form-height: calc(100% - 82px);
-
-	// Settings body container height minus header height
-	--settings-body-container-height: calc(100% - 165px);
-
 	----site-settings-text-color: #6F6F6F;
 }