Make the content more compact and prevent harsh flex cutoff when container is too small

omargfh · omargfh · commit 3b2dc9010709 · 2025-09-02T10:47:25.000-05:00
diff --git a/index.html b/index.html
@@ -6,8 +6,8 @@
     <title>Color Picker</title>
   </head>
 
-  <body class="flex column x-mid">
-    <div id="main" class="flex column x-mid">
+  <body class="x-mid">
+    <div id="main" class="flex column x-mid gap mx-auto">
 
       <div id="tab-strip" class="tab-strip flex row">
         <div id="simple-tab"   class="simple   tab-button selected">Simple</div>
diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css
@@ -6,6 +6,7 @@
 body {
   background: var(--dialog-background);
   padding:    0.75rem 0;
+  min-width:  fit-content;
 }
 
 body.dragging, body.dragging * {
@@ -43,8 +44,7 @@ body.dragging, body.dragging * {
 }
 
 #content-pane {
-  height: 38rem;
-  width:  70%;
+  padding-inline: 5%;
 }
 
 .checkmark {
@@ -177,7 +177,7 @@ body.dragging, body.dragging * {
 
 .main-outputs {
   gap:    0.3rem;
-  margin: 1.5rem 0;
+  margin: 1.5rem 0 0 0;
 }
 
 .output-field {
@@ -233,6 +233,14 @@ body.dragging, body.dragging * {
 }
 
 .tab-strip {
-  margin-bottom: 1.5rem;
   position:      relative;
 }
+
+.gap {
+  gap: 3rem;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}

Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,7 @@`
`6`	`6`	`body {`
`7`	`7`	`background: var(--dialog-background);`
`8`	`8`	`padding: 0.75rem 0;`
	`9`	`+ min-width: fit-content;`
`9`	`10`	`}`
`10`	`11`
`11`	`12`	`body.dragging, body.dragging * {`
`@@ -43,8 +44,7 @@ body.dragging, body.dragging * {`
`43`	`44`	`}`
`44`	`45`
`45`	`46`	`#content-pane {`
`46`		`- height: 38rem;`
`47`		`- width: 70%;`
	`47`	`+ padding-inline: 5%;`
`48`	`48`	`}`
`49`	`49`
`50`	`50`	`.checkmark {`
`@@ -177,7 +177,7 @@ body.dragging, body.dragging * {`
`177`	`177`
`178`	`178`	`.main-outputs {`
`179`	`179`	`gap: 0.3rem;`
`180`		`- margin: 1.5rem 0;`
	`180`	`+ margin: 1.5rem 0 0 0;`
`181`	`181`	`}`
`182`	`182`
`183`	`183`	`.output-field {`
`@@ -233,6 +233,14 @@ body.dragging, body.dragging * {`
`233`	`233`	`}`
`234`	`234`
`235`	`235`	`.tab-strip {`
`236`		`- margin-bottom: 1.5rem;`
`237`	`236`	`position: relative;`
`238`	`237`	`}`
	`238`	`+`
	`239`	`+.gap {`
	`240`	`+ gap: 3rem;`
	`241`	`+}`
	`242`	`+`
	`243`	`+.mx-auto {`
	`244`	`+ margin-left: auto;`
	`245`	`+ margin-right: auto;`
	`246`	`+}`