From 06afdcec3723971e6b046c720528d78542ae8e5a Mon Sep 17 00:00:00 2001
From: Arthur Lu <root@tronnet.net>
Date: Fri, 10 Oct 2025 06:35:28 +0000
Subject: [PATCH] reimplement instance card using display;contents to have
 better alignment and fitting to grid for instance card container, migrate
 away from using w3-hide to custom hide for breakpoint fixes

---
 web/css/style.css                   |  30 ++++---
 web/html/backups.html               |   4 +-
 web/html/index.html                 |  69 ++++++++++++----
 web/templates/backups.go.tmpl       |   4 +-
 web/templates/instance-card.go.tmpl | 124 ++++++++++++++--------------
 5 files changed, 140 insertions(+), 91 deletions(-)

diff --git a/web/css/style.css b/web/css/style.css
index 4084f79..dbffbfa 100644
--- a/web/css/style.css
+++ b/web/css/style.css
@@ -100,7 +100,7 @@ img, svg {
 	color: var(--main-text-color)
 }
 
-hr, * {
+hr {
 	border-color: var(--main-text-color);
 }
 
@@ -156,18 +156,26 @@ hr, * {
 }
 
 /* add hide large class similar to w3-hide-medium and w3-hide-small */
-@media (width >=993px) {
-	.w3-hide-large {
-		display: none !important;
-	}
+@media screen and (width >=993px) {
+	.hide-large {display: none !important;}
 }
 
-/* fix edge case in w3-hide-medium where width between 992 and 993 */
-@media (width <=993px) and (width >=601px){
-	.w3-hide-medium{display:none!important}
+/* fixes edge case in w3-hide-medium where width between 992 and 993 */
+@media screen and (width <=993px) and (width >=601px){
+	.hide-large {display: none !important;}
+	.hide-medium {display:none !important}
 }
 
-/* fix edge case in w3-hide-small when width between 600 and 601 */
-@media (width <=601px) {
-	.w3-hide-small{display:none!important}
+/* fixes edge case in w3-hide-small when width between 600 and 601 */
+@media screen and (width <=601px) {
+	.hide-large {display: none !important;}
+	.hide-medium {display:none !important}
+	.hide-small {display:none !important}
+}
+
+@media screen and (width <= 440px) {
+	.hide-large {display: none !important;}
+	.hide-medium {display:none !important}
+	.hide-small {display:none !important}
+	.hide-tiny { display: none !important;}
 }
\ No newline at end of file
diff --git a/web/html/backups.html b/web/html/backups.html
index eb89376..260766d 100644
--- a/web/html/backups.html
+++ b/web/html/backups.html
@@ -17,8 +17,8 @@
 			<section class="w3-card w3-padding">
 				<div class="w3-row" style="border-bottom: 1px solid;">
 					<p class="w3-col l2 m4 s8">Time</p>
-					<p class="w3-col l6 m6 w3-hide-small">Notes</p>
-					<p class="w3-col l2 w3-hide-medium w3-hide-small">Size</p>
+					<p class="w3-col l6 m6 hide-small">Notes</p>
+					<p class="w3-col l2 hide-medium">Size</p>
 					<p class="w3-col l2 m2 s4">Actions</p>
 				</div>
 				<div id="backups-container">
diff --git a/web/html/index.html b/web/html/index.html
index 16ac9b8..7eb307e 100644
--- a/web/html/index.html
+++ b/web/html/index.html
@@ -8,12 +8,6 @@
 		<link rel="modulepreload" href="scripts/dialog.js">
 		<link rel="modulepreload" href="scripts/clientsync.js">
 		<style>
-			#instance-container > div {
-				border-bottom: 1px solid white;
-			}
-			#instance-container > div:last-child {
-				border-bottom: none;
-			}
 			@media screen and (width >= 440px) {
 				#vm-search {
 					max-width: calc(100% - 10px - 152px);
@@ -24,6 +18,50 @@
 					max-width: calc(100% - 10px - 47px);
 				}
 			}
+			@media screen and (width >= 993px) {
+				#instance-table {
+					display: grid;
+					grid-template-columns: repeat(7, auto);
+					grid-column-gap: 1em;
+					grid-row-gap: 0.25em;
+				}
+				#instance-table-header, #instance-container, #instance-table instance-card {
+					display: contents;
+				}
+			}
+			@media screen and (width <= 993px) and (width >= 601px){
+				#instance-table {
+					display: grid;
+					grid-template-columns: repeat(5, auto);
+					grid-column-gap: 1em;
+					grid-row-gap: 0.25em;
+				}
+				#instance-table-header, #instance-container, #instance-table instance-card {
+					display: contents;
+				}
+			}
+			@media screen and (width <= 601px) and (width >= 440px){
+				#instance-table {
+					display: grid;
+					grid-template-columns: repeat(4, auto);
+					grid-column-gap: 1em;
+					grid-row-gap: 0.25em;
+				}
+				#instance-table-header, #instance-container, #instance-table instance-card {
+					display: contents;
+				}
+			}
+			@media screen and (width <= 440px) {
+				#instance-table {
+					display: grid;
+					grid-template-columns: repeat(3, auto);
+					grid-column-gap: 1em;
+					grid-row-gap: 0.25em;
+				}
+				#instance-table-header, #instance-container, #instance-table instance-card {
+					display: contents;
+				}
+			}
 		</style>
 	</head>
 	<body>
@@ -90,16 +128,17 @@
 							</dialog>
 						</template>
 					</div>
-					<div>
-						<div class="w3-row w3-hide-small" style="border-bottom: 1px solid;">
-							<p class="w3-col l1 m1 w3-hide-small">ID</p>
-							<p class="w3-col l2 m3 w3-hide-small">Name</p>
-							<p class="w3-col l1 m2 w3-hide-small">Type</p>
-							<p class="w3-col l2 m3 w3-hide-small">Status</p>
-							<p class="w3-col l2 w3-hide-medium w3-hide-small">Host Name</p>
-							<p class="w3-col l2 w3-hide-medium w3-hide-small">Host Status</p>
-							<p class="w3-col l2 m3 w3-hide-small">Actions</p>
+					<div id="instance-table">
+						<div id="instance-table-header">
+							<p>ID</p>
+							<p>Name</p>
+							<p class="hide-tiny">Type</p>
+							<p class="hide-small">Status</p>
+							<p class="hide-medium">Host Name</p>
+							<p class="hide-medium">Host Status</p>
+							<p>Actions</p>
 						</div>
+						<hr style="grid-column: 1 / -1; padding: 0; margin: 0;">
 						<div id="instance-container">
 							{{range .instances}}
 								{{template "instance-card" .}}
diff --git a/web/templates/backups.go.tmpl b/web/templates/backups.go.tmpl
index 52326c9..7a1ec96 100644
--- a/web/templates/backups.go.tmpl
+++ b/web/templates/backups.go.tmpl
@@ -20,8 +20,8 @@
 		</style>
 		<div class="w3-row" style="margin-top: 1em; margin-bottom: 1em;">
 			<p class="w3-col l2 m4 s8">{{.TimeFormatted}}</p>
-			<p class="w3-col l6 m6 w3-hide-small">{{.Notes}}</p>
-			<p class="w3-col l2 w3-hide-medium w3-hide-small">{{.SizeFormatted}}</p>
+			<p class="w3-col l6 m6 hide-small">{{.Notes}}</p>
+			<p class="w3-col l2 hide-medium">{{.SizeFormatted}}</p>
 			<div class="w3-col l2 m2 s4 flex row nowrap" style="height: 1lh;">
 				<svg id="edit-btn" class="clickable" aria-label="change notes"><use href="images/actions/backups/config.svg#symb"></svg>
 				<svg id="delete-btn" class="clickable" aria-label="delete backup" role="button" tabindex=0><use href="images/actions/backups/delete-active.svg#symb"></svg>
diff --git a/web/templates/instance-card.go.tmpl b/web/templates/instance-card.go.tmpl
index 25372b1..2a04191 100644
--- a/web/templates/instance-card.go.tmpl
+++ b/web/templates/instance-card.go.tmpl
@@ -6,75 +6,77 @@
 		<style>
 			* {
 				margin: 0;
+				padding: 0;
+				width: fit-content;
 			}
-			a {
+			a, svg {
+				line-height: 1em;
 				height: 1em;
 				width: 1em;
 				margin: 0px;
 				padding: 0px;
 			}
-			svg {
-				height: 1em;
-				width: 1em;
+			#instance-name {
+				overflow-x: hidden;
+				min-width: 0;
+				width: auto;
+				white-space: nowrap;
 			}
 		</style>
-		<div class="w3-row" style="margin-top: 1em; margin-bottom: 1em;">
-			<hr class="w3-show-small w3-hide-medium w3-hide-large" style="margin: 0; margin-bottom: 1em;">
-			<p class="w3-col l1 m1 s6">{{.VMID}}</p>
-			<p class="w3-col l2 m3 s6" id="instance-name">{{.Name}}</p>
-			<p class="w3-col l1 m2 w3-hide-small">{{.Type}}</p>
-			<div class="w3-col l2 m3 s6 flex row nowrap">
-				{{if eq .Status "running"}}
-					<svg id="status" aria-label="instance is running"><use href="images/status/active.svg#symb"></svg>
-				{{else if eq .Status "stopped"}}
-					<svg id="status" aria-label="instance is stopped"><use href="images/status/inactive.svg#symb"></svg>
-				{{else if eq .Status "loading"}}
-					<svg id="status" aria-label="instance is loading"><use href="images/status/loading.svg#symb"></svg>
-				{{else}}
-					<svg id="status" aria-label="instance is loading"><use href="images/status/loading.svg#symb"></svg>
-				{{end}}
-				<p>{{.Status}}</p>
-			</div>
-			<p class="w3-col l2 w3-hide-medium w3-hide-small">{{.Node}}</p>
-			<div class="w3-col l2 w3-hide-medium w3-hide-small flex row nowrap">
-				{{if eq .NodeStatus "online"}}
-					<svg aria-label="node is online"><use href="images/status/active.svg#symb"></svg>
-				{{else if eq .NodeStatus "offline"}}
-					<svg aria-label="node is offline"><use href="images/status/inactive.svg#symb"></svg>
-				{{else if eq .NodeStatus "unknown"}}
-					<svg aria-label="node is offline"><use href="images/status/inactive.svg#symb"></svg>
-				{{else}}
-				{{end}}
-				<p>{{.NodeStatus}}</p>
-			</div>
-			<div class="w3-col l2 m3 s6 flex row nowrap" style="height: 1lh;">
-				{{if and (eq .NodeStatus "online") (eq .Status "running")}}
-					<svg id="power-btn" class="clickable" aria-label="shutdown instance" role="button" tabindex=0><use href="images/actions/instance/stop.svg#symb"></svg>
-					<svg id="configure-btn" aria-disabled="true" role="none"><use href="images/actions/instance/config-inactive.svg#symb"></svg>
-					<svg id="backup-btn" aria-disabled="true" role="none"><use href="images/actions/instance/backup-inactive.svg#symb"></svg>
-					<a href="{{.ConsolePath}}" target="_blank">
-						<svg id="console-btn" class="clickable" aria-label="open console"><use href="images/actions/instance/console-active.svg#symb"></svg>
-					</a>
-					<svg id="delete-btn" aria-disabled="true" role="none"><use href="images/actions/instance/delete-inactive.svg#symb"></svg>
-				{{else if and (eq .NodeStatus "online") (eq .Status "stopped")}}
-					<svg id="power-btn" class="clickable" aria-label="start instance" role="button" tabindex=0><use href="images/actions/instance/start.svg#symb"></svg>
-					<a href="{{.ConfigPath}}">
-						<svg id="configure-btn" class="clickable" aria-label="change configuration"><use href="images/actions/instance/config-active.svg#symb"></svg>
-					</a>
-					<a href="{{.BackupsPath}}">
-						<svg id="backup-btn" class="clickable" aria-label="manage backups"><use href="images/actions/instance/backup-active.svg#symb"></svg>
-					</a>
-					<svg id="console-btn" aria-disabled="true" role="none"><use href="images/actions/instance/console-inactive.svg#symb"></svg>
-					<svg id="delete-btn" class="clickable" aria-label="delete instance" role="button" tabindex=0><use href="images/actions/instance/delete-active.svg#symb"></svg>
-				{{else if and (eq .NodeStatus "online") (eq .Status "loading")}}
-					<svg id="power-btn" aria-disabled="true" role="none"><use href="images/actions/instance/loading.svg#symb"></svg>
-					<svg id="configure-btn" aria-disabled="true" role="none"><use href="images/actions/instance/config-inactive.svg#symb"></svg>
-					<svg id="backup-btn" aria-disabled="true" role="none"><use href="images/actions/instance/backup-inactive.svg#symb"></svg>
-					<svg id="console-btn" aria-disabled="true" role="none"><use href="images/actions/instance/console-inactive.svg#symb"></svg>
-					<svg id="delete-btn" aria-disabled="true" role="none"><use href="images/actions/instance/delete-inactive.svg#symb"></svg>
-				{{else}}
-				{{end}}
-			</div>
+		<p>{{.VMID}}</p>
+		<p id="instance-name">{{.Name}}</p>
+		<p class="hide-small">{{.Type}}</p>
+		<div class="flex row nowrap hide-tiny">
+			{{if eq .Status "running"}}
+				<svg id="status" aria-label="instance is running"><use href="images/status/active.svg#symb"></svg>
+			{{else if eq .Status "stopped"}}
+				<svg id="status" aria-label="instance is stopped"><use href="images/status/inactive.svg#symb"></svg>
+			{{else if eq .Status "loading"}}
+				<svg id="status" aria-label="instance is loading"><use href="images/status/loading.svg#symb"></svg>
+			{{else}}
+				<svg id="status" aria-label="instance is loading"><use href="images/status/loading.svg#symb"></svg>
+			{{end}}
+			<p>{{.Status}}</p>
+		</div>
+		<p class="hide-medium">{{.Node}}</p>
+		<div class="flex row nowrap hide-medium">
+			{{if eq .NodeStatus "online"}}
+				<svg aria-label="node is online"><use href="images/status/active.svg#symb"></svg>
+			{{else if eq .NodeStatus "offline"}}
+				<svg aria-label="node is offline"><use href="images/status/inactive.svg#symb"></svg>
+			{{else if eq .NodeStatus "unknown"}}
+				<svg aria-label="node is offline"><use href="images/status/inactive.svg#symb"></svg>
+			{{else}}
+			{{end}}
+			<p>{{.NodeStatus}}</p>
+		</div>
+		<div class="flex row nowrap" style="height: 1lh;">
+			{{if and (eq .NodeStatus "online") (eq .Status "running")}}
+				<svg id="power-btn" class="clickable" aria-label="shutdown instance" role="button" tabindex=0><use href="images/actions/instance/stop.svg#symb"></svg>
+				<svg id="configure-btn" aria-disabled="true" role="none"><use href="images/actions/instance/config-inactive.svg#symb"></svg>
+				<svg id="backup-btn" aria-disabled="true" role="none"><use href="images/actions/instance/backup-inactive.svg#symb"></svg>
+				<a href="{{.ConsolePath}}" target="_blank">
+					<svg id="console-btn" class="clickable" aria-label="open console"><use href="images/actions/instance/console-active.svg#symb"></svg>
+				</a>
+				<svg id="delete-btn" aria-disabled="true" role="none"><use href="images/actions/instance/delete-inactive.svg#symb"></svg>
+			{{else if and (eq .NodeStatus "online") (eq .Status "stopped")}}
+				<svg id="power-btn" class="clickable" aria-label="start instance" role="button" tabindex=0><use href="images/actions/instance/start.svg#symb"></svg>
+				<a href="{{.ConfigPath}}">
+					<svg id="configure-btn" class="clickable" aria-label="change configuration"><use href="images/actions/instance/config-active.svg#symb"></svg>
+				</a>
+				<a href="{{.BackupsPath}}">
+					<svg id="backup-btn" class="clickable" aria-label="manage backups"><use href="images/actions/instance/backup-active.svg#symb"></svg>
+				</a>
+				<svg id="console-btn" aria-disabled="true" role="none"><use href="images/actions/instance/console-inactive.svg#symb"></svg>
+				<svg id="delete-btn" class="clickable" aria-label="delete instance" role="button" tabindex=0><use href="images/actions/instance/delete-active.svg#symb"></svg>
+			{{else if and (eq .NodeStatus "online") (eq .Status "loading")}}
+				<svg id="power-btn" aria-disabled="true" role="none"><use href="images/actions/instance/loading.svg#symb"></svg>
+				<svg id="configure-btn" aria-disabled="true" role="none"><use href="images/actions/instance/config-inactive.svg#symb"></svg>
+				<svg id="backup-btn" aria-disabled="true" role="none"><use href="images/actions/instance/backup-inactive.svg#symb"></svg>
+				<svg id="console-btn" aria-disabled="true" role="none"><use href="images/actions/instance/console-inactive.svg#symb"></svg>
+				<svg id="delete-btn" aria-disabled="true" role="none"><use href="images/actions/instance/delete-inactive.svg#symb"></svg>
+			{{else}}
+			{{end}}
 		</div>
 		<template id="power-dialog">
 			<link rel="stylesheet" href="modules/w3.css">