fix: Some forms on the new 'Form Elements' page don't lay out neatly … (#2444)

Co-authored-by: Paweł Kuna <[email protected]>

.changeset/twelve-tables-attack.md

@@ -0,0 +1,5 @@
+---
+"@tabler/preview": patch
+---
+
+Fix responsive layputs in 'Form Elements' page

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>

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>