From 4842316907613875feac0e2e542d26cf26137db5 Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Mon, 1 Dec 2025 12:06:52 +0100
Subject: [PATCH] feat: Enhance layout options in settings and update SCSS
 imports

---
 core/scss/_core.scss          |  1 +
 core/scss/layout/_core.scss   | 44 --------------------------------
 core/scss/layout/_layout.scss | 47 +++++++++++++++++++++++++++++++++++
 shared/includes/settings.html | 27 +++++++++++++++-----
 4 files changed, 69 insertions(+), 50 deletions(-)
 create mode 100644 core/scss/layout/_layout.scss

diff --git a/core/scss/_core.scss b/core/scss/_core.scss
index c83ee038f..e4d5f5186 100644
--- a/core/scss/_core.scss
+++ b/core/scss/_core.scss
@@ -13,6 +13,7 @@
 @import 'layout/page';
 @import 'layout/footer';
 @import 'layout/dark';
+@import 'layout/layout';
 
 @import 'ui/accordion';
 @import 'ui/alerts';
diff --git a/core/scss/layout/_core.scss b/core/scss/layout/_core.scss
index f851a8ac0..156a30413 100644
--- a/core/scss/layout/_core.scss
+++ b/core/scss/layout/_core.scss
@@ -1,5 +1,3 @@
-@use 'sass:map';
-
 html {
   scrollbar-gutter: stable;
 
@@ -32,45 +30,3 @@ body {
 }
 
 @include scrollbar;
-
-//
-// Fluid container
-//
-.layout-fluid {
-  .container,
-  [class^='container-'],
-  [class*=' container-'] {
-    max-width: 100%;
-  }
-}
-
-//
-// Boxed container
-//
-.layout-boxed {
-  --#{$prefix}theme-boxed-border-radius: 0;
-  --#{$prefix}theme-boxed-width: #{map.get($container-max-widths, xxl)};
-
-  @include media-breakpoint-up(md) {
-    background: $dark linear-gradient(to right, rgba(#fff, 0.1), transparent) fixed;
-    padding: 1rem;
-    --#{$prefix}theme-boxed-border-radius: #{$border-radius};
-  }
-
-  .page {
-    margin: 0 auto;
-    max-width: var(--#{$prefix}theme-boxed-width);
-    border-radius: var(--#{$prefix}theme-boxed-border-radius);
-    color: var(--#{$prefix}body-color);
-
-    @include media-breakpoint-up(md) {
-      border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
-      background: var(--#{$prefix}body-bg);
-    }
-
-    > .navbar:first-child {
-      border-start-start-radius: var(--#{$prefix}theme-boxed-border-radius);
-      border-start-end-radius: var(--#{$prefix}theme-boxed-border-radius);
-    }
-  }
-}
diff --git a/core/scss/layout/_layout.scss b/core/scss/layout/_layout.scss
new file mode 100644
index 000000000..4f70611e3
--- /dev/null
+++ b/core/scss/layout/_layout.scss
@@ -0,0 +1,47 @@
+@use 'sass:map';
+
+//
+// Fluid container
+//
+.layout-fluid,
+[data-bs-theme-layout="fluid"],
+[data-layout="fluid"] {
+   .container,
+   [class^='container-'],
+   [class*=' container-'] {
+      max-width: 100%;
+   }
+}
+
+//
+// Boxed container
+//
+.layout-boxed,
+[data-bs-theme-layout="boxed"],
+[data-layout="boxed"] {
+   --#{$prefix}theme-boxed-border-radius: 0;
+   --#{$prefix}theme-boxed-width: #{map.get($container-max-widths, xxl)};
+
+   @include media-breakpoint-up(md) {
+      background: $dark linear-gradient(to right, rgba(#fff, 0.1), transparent) fixed;
+      padding: 1rem;
+      --#{$prefix}theme-boxed-border-radius: #{$border-radius};
+   }
+
+   .page {
+      margin: 0 auto;
+      max-width: var(--#{$prefix}theme-boxed-width);
+      border-radius: var(--#{$prefix}theme-boxed-border-radius);
+      color: var(--#{$prefix}body-color);
+
+      @include media-breakpoint-up(md) {
+         border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+         background: var(--#{$prefix}body-bg);
+      }
+
+      >.navbar:first-child {
+         border-start-start-radius: var(--#{$prefix}theme-boxed-border-radius);
+         border-start-end-radius: var(--#{$prefix}theme-boxed-border-radius);
+      }
+   }
+}
\ No newline at end of file
diff --git a/shared/includes/settings.html b/shared/includes/settings.html
index 6b79efb22..f97757c27 100644
--- a/shared/includes/settings.html
+++ b/shared/includes/settings.html
@@ -43,13 +43,14 @@
 					<label class="form-label">Font family</label>
 					<p class="form-hint">Choose the font family that fits your app.</p>
 
-					<div>
+					<div class="form-selectgroup">
 						{% assign fonts = 'sans-serif,serif,monospace,comic' | split: ',' %} {% for font in fonts %}
-						<label class="form-check">
-							<div class="form-selectgroup-item">
-								<input type="radio" name="theme-font" value="{{ font }}" class="form-check-input"{% if font == 'sans-serif' %} checked{% endif %} />
-								<div class="form-check-label">{{ font | capitalize }}</div>
-							</div>
+						<label class="form-selectgroup-item">
+							<input type="radio" name="theme-font" value="{{ font }}" class="form-selectgroup-input"{% if font == 'sans-serif' %} checked{% endif %} />
+							<span class="form-selectgroup-label">
+								<span class="form-selectgroup-check"></span>
+								<span class="display-6" style="font-family: var(--tblr-font-{{ font }})">Aa</span>
+							</span>
 						</label>
 						{% endfor %}
 					</div>
@@ -88,6 +89,19 @@
 						{% endfor %}
 					</div>
 				</div>
+
+				<div class="mb-4">
+					<label class="form-label">Layout</label>
+					<p class="form-hint">Choose the layout style for your app.</p>
+					{% assign layouts = 'fluid,boxed' | split: ',' %} {% for layout in layouts %}
+					<label class="form-check">
+						<div class="form-selectgroup-item">
+							<input type="radio" name="theme-layout" value="{{ layout }}" class="form-check-input"{% if layout == 'fluid' %} checked{% endif %} />
+							<div class="form-check-label">{{ layout | capitalize }}</div>
+						</div>
+					</label>
+					{% endfor %}
+				</div>
 			</div>
 
 			<div class="mt-auto space-y">
@@ -121,6 +135,7 @@
 			"theme-font": "sans-serif",
 			"theme-primary": "blue",
 			"theme-radius": "1",
+			"theme-layout": "fluid",
 		}
 
 		var url = new URL(window.location)