From bd35fd39cf8a73e0e93cbbee62edfca3796e4e7e Mon Sep 17 00:00:00 2001
From: Koray Tuncer <78158735+koraytuncer@users.noreply.github.com>
Date: Wed, 23 Jul 2025 20:12:47 +0300
Subject: [PATCH] =?UTF-8?q?fix:=20Some=20forms=20on=20the=20new=20'Form=20?=
 =?UTF-8?q?Elements'=20page=20don't=20lay=20out=20neatly=20=E2=80=A6=20(#2?=
 =?UTF-8?q?444)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Paweł Kuna <1282324+codecalm@users.noreply.github.com>
---
 .changeset/twelve-tables-attack.md     |  5 +++++
 preview/pages/form-elements.html       | 20 ++++++++++----------
 shared/includes/cards/form/layout.html |  5 ++++-
 3 files changed, 19 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/twelve-tables-attack.md

diff --git a/.changeset/twelve-tables-attack.md b/.changeset/twelve-tables-attack.md
new file mode 100644
index 000000000..1acddd8bd
--- /dev/null
+++ b/.changeset/twelve-tables-attack.md
@@ -0,0 +1,5 @@
+---
+"@tabler/preview": patch
+---
+
+Fix responsive layputs in 'Form Elements' page
diff --git a/preview/pages/form-elements.html b/preview/pages/form-elements.html
index 1e824f2bd..9f110c743 100644
--- a/preview/pages/form-elements.html
+++ b/preview/pages/form-elements.html
@@ -45,7 +45,7 @@ permalink: form-elements.html
 	</div>
 
 	<div class="col-md-6">
-		<div class="card">
+		<div class="card h-100">
 			<div class="card-body">
 				<h3 class="card-title">Project ID</h3>
 				<p class="card-subtitle">Used when interacting with the API.</p>
@@ -80,13 +80,13 @@ permalink: form-elements.html
 		</div>
 	</div>
 
-	<div class="col-md-6">
+	<div class="col-12 col-lg-4">
 		{% include "cards/form/layout.html" %}
 	</div>
 
-	<div class="col-lg-4">
+	<div class="col-lg-8">
 		<div class="row row-cards">
-			<div class="col-12">
+			<div class="col-12 col-lg-6">
 				<div class="card">
 					<div class="card-header">
 						<h3 class="card-title">Input mask</h3>
@@ -127,8 +127,8 @@ permalink: form-elements.html
 					</div>
 				</div>
 			</div>
-			<div class="col-12">
-				<form class="card">
+			<div class="col-12 col-lg-6">
+				<form class="card h-100">
 					<div class="card-header">
 						<h3 class="card-title">My Profile</h3>
 					</div>
@@ -168,9 +168,9 @@ permalink: form-elements.html
 		</div>
 	</div>
 
-	<div class="col-lg-8">
+	<div class="col-lg-12">
 		<div class="row row-cards">
-			<div class="col-12">
+			<div class="col-12 col-lg-6">
 				<form class="card">
 					<div class="card-body">
 						<h3 class="card-title">Edit Profile</h3>
@@ -250,8 +250,8 @@ But that's the difference in our opinions.</textarea>
 					</div>
 				</form>
 			</div>
-			<div class="col-12">
-				<div class="card">
+			<div class="col-12 col-lg-6">
+				<div class="card h-100">
 					<div class="card-header">
 						<h3 class="card-title">HTTP Request</h3>
 					</div>
diff --git a/shared/includes/cards/form/layout.html b/shared/includes/cards/form/layout.html
index 094d00be1..c3cd6d742 100644
--- a/shared/includes/cards/form/layout.html
+++ b/shared/includes/cards/form/layout.html
@@ -1,5 +1,5 @@
 {% assign horizontal = include.horizontal | default: false %}
-<form class="card">
+<form class="card h-100">
 	<div class="card-header">
 		<h3 class="card-title">{{ include.title | default: 'Basic form' }}</h3>
 	</div>
@@ -64,6 +64,9 @@
 				</label>
 			</div>
 		</div>
+		
+	</div>
+	<div class="card-footer">
 		<div class="text-end">
 			<button type="submit" class="btn btn-primary">Submit</button>
 		</div>