From c7a8ce706099bba07f4872411bb137b70503e367 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Wed, 22 Jan 2025 19:13:15 -0500
Subject: [PATCH] apps: display: grid.

---
 apps/apps.json   |  2 +-
 apps/apps/app.js | 21 +++++++++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/apps/apps.json b/apps/apps.json
index 89ce58e1..1072c804 100644
--- a/apps/apps.json
+++ b/apps/apps.json
@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "💻",
-	"previous": "&OFzapemXnBpvXSLlNLy3JQHdTT1wJzmBVjUcpiYf8SQ=.sha256"
+	"previous": "&sFRTDn/RpxP1NJeECXHrXKwCRUJsEOEDVaCMPl50zpM=.sha256"
 }
diff --git a/apps/apps/app.js b/apps/apps/app.js
index 19ceafb2..f1998eff 100644
--- a/apps/apps/app.js
+++ b/apps/apps/app.js
@@ -68,6 +68,16 @@ async function main() {
 			margin: 8px;
 		}
 
+		.iconbox {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
+		}
+
+		.iconbox::after {
+			content: "";
+			flex: auto;
+		}
+
 		.app {
 			height: 96px;
 			width: 64px;
@@ -87,24 +97,27 @@ async function main() {
 	`;
 
 	const body = `
-		<h1 style="text-shadow: #808080 0 0 10px;">Welcome to Tilde Friends</h1>
+		<h1>Welcome to Tilde Friends</h1>
 
-		<div id="apps" class="w3-card-4 w3-dark-gray w3-margin-top">
+		<div class="w3-card-4 w3-margin-top">
 			<header class="w3-container w3-light-blue">
 				<h2>Your Apps</h2>
 			</header>
+			<div id="apps" class="w3-indigo iconbox"></div>
 		</div>
 
-		<div id="shared_apps" class="w3-card-4 w3-dark-gray w3-margin-top">
+		<div class="w3-card-4 w3-margin-top">
 			<header class="w3-container w3-light-blue">
 				<h2>Shared Apps</h2>
 			</header>
+			<div id="shared_apps" class="w3-indigo iconbox"></div>
 		</div>
 
-		<div id="core_apps" class="w3-card-4 w3-dark-gray w3-margin-top">
+		<div class="w3-card-4 w3-margin-top">
 			<header class="w3-container w3-light-blue">
 				<h2>Core Apps</h2>
 			</header>
+			<div id="core_apps" class="w3-indigo iconbox"></div>
 		</div>
 	`;