update paas fabric submodule

update go mod
add a bunch of comments to important code
2025-12-09 00:51:34 +00:00 · 2025-12-09 00:50:45 +00:00 · 2025-11-18 19:36:05 +00:00 · 2025-11-07 22:56:10 +00:00 · 2025-11-07 21:03:34 +00:00 · 2025-10-30 05:30:05 +00:00
32 changed files with 530 additions and 298 deletions
--- a/2
+++ b/2
--- a/app/app.go
+++ b/app/app.go
@@ -1,35 +1,32 @@
 package app

 import (
-	"flag"
 	"fmt"
 	"log"
-	"proxmoxaas-dashboard/dist/web" // go will complain here until the first build
-
 	"proxmoxaas-dashboard/app/common"
 	"proxmoxaas-dashboard/app/routes"
+	"proxmoxaas-dashboard/dist/web" // go will complain here until the first build

 	"github.com/gin-gonic/gin"
 	"github.com/tdewolff/minify/v2"
 )

-func Run() {
-	gin.SetMode(gin.ReleaseMode)
-
-	configPath := flag.String("config", "config.json", "path to config.json file")
-	flag.Parse()
+func Run(configPath *string) {
 	common.Global = common.GetConfig(*configPath)

+	// setup static resources
+	gin.SetMode(gin.ReleaseMode)
 	router := gin.Default()
 	m := common.InitMinify()
 	ServeStatic(router, m)
 	html := common.MinifyStatic(m, web.Templates)
 	common.TMPL = common.LoadHTMLToGin(router, html)

-	router.GET("/account", routes.HandleGETAccount)
+	// dynamic routes for pages and page fragments
 	router.GET("/", routes.HandleGETIndex)
 	router.GET("/index", routes.HandleGETIndex)
 	router.GET("/index/instances", routes.HandleGETInstancesFragment)
+	router.GET("/account", routes.HandleGETAccount)
 	router.GET("/config", routes.HandleGETConfig)
 	router.GET("/config/volumes", routes.HandleGETConfigVolumesFragment)
 	router.GET("/config/nets", routes.HandleGETConfigNetsFragment)
@@ -40,9 +37,11 @@ func Run() {
 	router.GET("/login", routes.HandleGETLogin)
 	router.GET("/settings", routes.HandleGETSettings)

+	// run on all interfaces with port
 	log.Fatal(router.Run(fmt.Sprintf("0.0.0.0:%d", common.Global.Port)))
 }

+// setup static resources under web (css, images, modules, scripts)
 func ServeStatic(router *gin.Engine, m *minify.M) {
 	css := common.MinifyStatic(m, web.CSS_fs)
 	router.GET("/css/*css", func(c *gin.Context) {
--- a/app/common/meta.go
+++ b/app/common/meta.go
@@ -38,6 +38,10 @@ var MimeTypes = map[string]MimeType{
 		Type:     "image/svg+xml",
 		Minifier: svg.Minify,
 	},
+	"png": {
+		Type:     "image/png",
+		Minifier: nil,
+	},
 	"js": {
 		Type:     "application/javascript",
 		Minifier: js.Minify,
@@ -51,3 +55,45 @@ var MimeTypes = map[string]MimeType{
 		Minifier: nil,
 	},
 }
+
+// debug mime types
+/*
+var MimeTypes = map[string]MimeType{
+	"css": {
+		Type:     "text/css",
+		Minifier: nil,
+	},
+	"html": {
+		Type:     "text/html",
+		Minifier: nil,
+	},
+	"tmpl": {
+		Type:     "text/plain",
+		Minifier: nil,
+	},
+	"frag": {
+		Type:     "text/plain",
+		Minifier: nil,
+	},
+	"svg": {
+		Type:     "image/svg+xml",
+		Minifier: nil,
+	},
+	"png": {
+		Type:     "image/png",
+		Minifier: nil,
+	},
+	"js": {
+		Type:     "application/javascript",
+		Minifier: nil,
+	},
+	"wasm": {
+		Type:     "application/wasm",
+		Minifier: nil,
+	},
+	"*": {
+		Type:     "text/plain",
+		Minifier: nil,
+	},
+}
+*/
--- a/app/common/types.go
+++ b/app/common/types.go
@@ -1,5 +1,9 @@
 package common

+import "html/template"
+
+var Global Config
+
 type Config struct {
 	Port         int    `json:"listenPort"`
 	Organization string `json:"organization"`
@@ -8,11 +12,23 @@ type Config struct {
 	API          string `json:"apiurl"`
 }

+// variable for html template root
+// generated from LoadHTMLToGin
+var TMPL *template.Template
+
+// static served file type containing data and mimetype
 type StaticFile struct {
 	Data     string
 	MimeType MimeType
 }

+// parsed vmpath data (ie node/type/vmid)
+type VMPath struct {
+	Node string
+	Type string
+	VMID string
+}
+
 // type used for templated <select>
 type Select struct {
 	ID       string
@@ -27,8 +43,6 @@ type Option struct {
 	Display  string
 }

-type RequestType int
-
 type RequestContext struct {
 	Cookies map[string]string
 }
--- a/app/common/utils.go
+++ b/app/common/utils.go
@@ -20,15 +20,7 @@ import (
 	"github.com/tdewolff/minify/v2"
 )

-var TMPL *template.Template
-var Global Config
-
-type VMPath struct {
-	Node string
-	Type string
-	VMID string
-}
-
+// get config file from configPath
 func GetConfig(configPath string) Config {
 	content, err := os.ReadFile(configPath)
 	if err != nil {
@@ -42,6 +34,7 @@ func GetConfig(configPath string) Config {
 	return config
 }

+// initialize minifier using the meta types specified
 func InitMinify() *minify.M {
 	m := minify.New()
 	for _, v := range MimeTypes {
@@ -125,7 +118,7 @@ func LoadHTMLToGin(engine *gin.Engine, html map[string]StaticFile) *template.Tem
 		},
 	}
 	tmpl := template.Must(root, LoadAndAddToRoot(engine.FuncMap, root, html))
-	engine.SetHTMLTemplate(tmpl)
+	engine.SetHTMLTemplate(root)
 	return tmpl
 }

--- a/app/routes/account.go
+++ b/app/routes/account.go
@@ -21,12 +21,14 @@ type Account struct {
 	Resources map[string]map[string]any
 }

+// numerical constraint
 type Constraint struct {
 	Max   int64
 	Used  int64
 	Avail int64
 }

+// match constraint
 type Match struct {
 	Name  string
 	Match string
@@ -107,6 +109,7 @@ func HandleGETAccount(c *gin.Context) {
 			return
 		}

+		// for each resource category, create a resource chart
 		for category, resources := range account.Resources {
 			for resource, v := range resources {
 				switch t := v.(type) {
--- a/app/routes/config.go
+++ b/app/routes/config.go
@@ -4,11 +4,10 @@ import (
 	"fmt"
 	"net/http"
 	"proxmoxaas-dashboard/app/common"
+	fabric "proxmoxaas-fabric/app"
 	"slices"
 	"sort"

-	fabric "proxmoxaas-fabric/app"
-
 	"github.com/gin-gonic/gin"
 	"github.com/go-viper/mapstructure/v2"
 )
--- a/app/routes/index.go
+++ b/app/routes/index.go
@@ -10,13 +10,7 @@ import (
 	"github.com/go-viper/mapstructure/v2"
 )

-// used in constructing instance cards in index
-type Node struct {
-	Node   string `json:"node"`
-	Status string `json:"status"`
-}
-
-// used in constructing instance cards in index
+// primary type used in constructing instance cards in index
 type InstanceCard struct {
 	VMID        uint
 	Name        string
@@ -29,6 +23,12 @@ type InstanceCard struct {
 	BackupsPath string
 }

+// used in constructing instance cards in index
+type Node struct {
+	Node   string `json:"node"`
+	Status string `json:"status"`
+}
+
 // used in retriving cluster tasks
 type Task struct {
 	Type    string
@@ -92,24 +92,24 @@ func GetClusterResources(auth common.Auth) (map[uint]InstanceCard, map[string]No
 	if err != nil {
 		return nil, nil, err
 	}
-	if code != 200 { // if we did not successfully retrieve resources, then return 500 because auth was 1 but was invalid somehow
+	if code != 200 { // if we did not successfully retrieve resources, then return the error because auth was 1 but was invalid somehow
 		return nil, nil, fmt.Errorf("request to /cluster/resources resulted in %+v", res)
 	}

 	instances := map[uint]InstanceCard{}
 	nodes := map[string]Node{}

-	// if we successfully retrieved the resources, then process it and return index
+	// parse /proxmox/cluster/resources to separate instances and nodes
 	for _, v := range body["data"].([]any) {
 		m := v.(map[string]any)
-		if m["type"] == "node" {
+		if m["type"] == "node" { // if type is node -> parse as Node object
 			node := Node{}
 			err := mapstructure.Decode(v, &node)
 			if err != nil {
 				return nil, nil, err
 			}
 			nodes[node.Node] = node
-		} else if m["type"] == "lxc" || m["type"] == "qemu" {
+		} else if m["type"] == "lxc" || m["type"] == "qemu" { // if type is lxc or qemu -> parse as InstanceCard object
 			instance := InstanceCard{}
 			err := mapstructure.Decode(v, &instance)
 			if err != nil {
@@ -118,16 +118,21 @@ func GetClusterResources(auth common.Auth) (map[uint]InstanceCard, map[string]No
 			instances[instance.VMID] = instance
 		}
 	}
+	// once all basic instance and node stuff is parsed, go back and fill in cross referenced data
 	for vmid, instance := range instances {
-		nodestatus := nodes[instance.Node].Status
-		instance.NodeStatus = nodestatus
+		// set instance's node status
+		instance.NodeStatus = nodes[instance.Node].Status
+		// set instance's config link path
 		instance.ConfigPath = fmt.Sprintf("config?node=%s&type=%s&vmid=%d", instance.Node, instance.Type, instance.VMID)
+		// set the instance's console link path
 		if instance.Type == "qemu" {
 			instance.ConsolePath = fmt.Sprintf("%s/?console=kvm&vmid=%d&vmname=%s&node=%s&resize=off&cmd=&novnc=1", common.Global.PVE, instance.VMID, instance.Name, instance.Node)
 		} else if instance.Type == "lxc" {
 			instance.ConsolePath = fmt.Sprintf("%s/?console=lxc&vmid=%d&vmname=%s&node=%s&resize=off&cmd=&xtermjs=1", common.Global.PVE, instance.VMID, instance.Name, instance.Node)
 		}
+		// set the instance's backups link path
 		instance.BackupsPath = fmt.Sprintf("backups?node=%s&type=%s&vmid=%d", instance.Node, instance.Type, instance.VMID)
+		// save back to instances map
 		instances[vmid] = instance
 	}

@@ -143,7 +148,9 @@ func GetClusterResources(auth common.Auth) (map[uint]InstanceCard, map[string]No
 	most_recent_task := map[uint]uint{}
 	expected_state := map[uint]string{}

+	// iterate through recent user accessible tasks to find the task most recently made on an instance
 	for _, v := range body["data"].([]any) {
+		// parse task as Task object
 		task := Task{}
 		err := mapstructure.Decode(v, &task)
 		if err != nil {
@@ -177,6 +184,7 @@ func GetClusterResources(auth common.Auth) (map[uint]InstanceCard, map[string]No
 		}
 	}

+	// iterate through the instances with recent tasks, refetch their state from a more reliable source
 	for vmid, expected_state := range expected_state { // for the expected states from recent tasks
 		if instances[vmid].Status != expected_state { // if the current node's state from /cluster/resources differs from expected state
 			// get /status/current which is updated faster than /cluster/resources
--- a/app/routes/login.go
+++ b/app/routes/login.go
@@ -26,7 +26,6 @@ func GetLoginRealms() ([]Realm, error) {

 	ctx := common.RequestContext{
 		Cookies: nil,
-		//Body:    map[string]any{},
 	}
 	body := map[string]any{}
 	res, code, err := common.RequestGetAPI("/proxmox/access/domains", ctx, &body)
--- a/go.mod
+++ b/go.mod
@@ -1,13 +1,12 @@
 module proxmoxaas-dashboard

-go 1.25.1
+go 1.25.5

 require (
 	github.com/gerow/go-color v0.0.0-20140219113758-125d37f527f1
 	github.com/gin-gonic/gin v1.11.0
 	github.com/go-viper/mapstructure/v2 v2.4.0
-	github.com/tdewolff/minify v2.3.6+incompatible
-	github.com/tdewolff/minify/v2 v2.24.3
+	github.com/tdewolff/minify/v2 v2.24.8
 	proxmoxaas-fabric v0.0.0
 )

@@ -16,18 +15,18 @@ replace proxmoxaas-fabric => ./ProxmoxAAS-Fabric
 require (
 	github.com/buger/goterm v1.0.4 // indirect
 	github.com/bytedance/gopkg v0.1.3 // indirect
-	github.com/bytedance/sonic v1.14.1 // indirect
-	github.com/bytedance/sonic/loader v0.3.0 // indirect
+	github.com/bytedance/sonic v1.14.2 // indirect
+	github.com/bytedance/sonic/loader v0.4.0 // indirect
 	github.com/cloudwego/base64x v0.1.6 // indirect
 	github.com/diskfs/go-diskfs v1.7.0 // indirect
 	github.com/djherbis/times v1.6.0 // indirect
-	github.com/gabriel-vasile/mimetype v1.4.10 // indirect
+	github.com/gabriel-vasile/mimetype v1.4.11 // indirect
 	github.com/gin-contrib/sse v1.1.0 // indirect
 	github.com/go-playground/locales v0.14.1 // indirect
 	github.com/go-playground/universal-translator v0.18.1 // indirect
-	github.com/go-playground/validator/v10 v10.27.0 // indirect
+	github.com/go-playground/validator/v10 v10.28.0 // indirect
 	github.com/goccy/go-json v0.10.5 // indirect
-	github.com/goccy/go-yaml v1.18.0 // indirect
+	github.com/goccy/go-yaml v1.19.0 // indirect
 	github.com/gorilla/websocket v1.5.3 // indirect
 	github.com/jinzhu/copier v0.4.0 // indirect
 	github.com/json-iterator/go v1.1.12 // indirect
@@ -39,21 +38,16 @@ require (
 	github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd // indirect
 	github.com/modern-go/reflect2 v1.0.2 // indirect
 	github.com/pelletier/go-toml/v2 v2.2.4 // indirect
-	github.com/quic-go/qpack v0.5.1 // indirect
-	github.com/quic-go/quic-go v0.54.0 // indirect
-	github.com/tdewolff/parse v2.3.4+incompatible // indirect
-	github.com/tdewolff/parse/v2 v2.8.3 // indirect
+	github.com/quic-go/qpack v0.6.0 // indirect
+	github.com/quic-go/quic-go v0.57.1 // indirect
+	github.com/tdewolff/parse/v2 v2.8.5 // indirect
 	github.com/twitchyliquid64/golang-asm v0.15.1 // indirect
-	github.com/ugorji/go/codec v1.3.0 // indirect
+	github.com/ugorji/go/codec v1.3.1 // indirect
 	go.uber.org/mock v0.6.0 // indirect
-	golang.org/x/arch v0.21.0 // indirect
-	golang.org/x/crypto v0.42.0 // indirect
-	golang.org/x/mod v0.28.0 // indirect
-	golang.org/x/net v0.44.0 // indirect
-	golang.org/x/sync v0.17.0 // indirect
-	golang.org/x/sys v0.36.0 // indirect
-	golang.org/x/text v0.29.0 // indirect
-	golang.org/x/tools v0.37.0 // indirect
-	google.golang.org/protobuf v1.36.9 // indirect
-	gopkg.in/yaml.v3 v3.0.1 // indirect
+	golang.org/x/arch v0.23.0 // indirect
+	golang.org/x/crypto v0.46.0 // indirect
+	golang.org/x/net v0.48.0 // indirect
+	golang.org/x/sys v0.39.0 // indirect
+	golang.org/x/text v0.32.0 // indirect
+	google.golang.org/protobuf v1.36.10 // indirect
 )
--- a/proxmoxaas-dashboard.go
+++ b/proxmoxaas-dashboard.go
@@ -1,9 +1,12 @@
 package main

 import (
+	"flag"
 	app "proxmoxaas-dashboard/app"
 )

 func main() {
-	app.Run()
+	configPath := flag.String("config", "config.json", "path to config.json file")
+	flag.Parse()
+	app.Run(configPath)
 }
--- a/web/css/form.css
+++ b/web/css/form.css
@@ -1,3 +1,8 @@
+input, select, textarea {
+	background-color: var(--main-input-bg-color);
+	color: var(--main-text-color);
+}
+
 .input-grid {
 	display: grid;
 	gap: 5px 10px;
@@ -16,7 +21,7 @@
 	padding: 8px;
 }

-.input-grid svg {
+.input-grid img {
 	padding: 0;
 }

@@ -76,6 +81,6 @@ input[type="radio"] {
 }

 dialog {
-	max-width: calc(min(50%, 80ch));
+	max-width: calc(min(100% - 16px, 80ch));
 	color: var(--main-text-color);
 }
--- a/web/css/style.css
+++ b/web/css/style.css
@@ -11,7 +11,6 @@
 		--main-text-color: white;
 		--main-card-bg-color: #202020;
 		--main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 80%), 0 2px 10px 0 rgb(0 0 0 / 80%);
-		--main-table-header-bg-color: black;
 		--main-input-bg-color: #404040;
 	}

@@ -20,7 +19,6 @@
 		--main-text-color: black;
 		--main-card-bg-color: white;
 		--main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 20%);
-		--main-table-header-bg-color: #808080;
 		--main-input-bg-color: white;
 	}
 }
@@ -31,7 +29,6 @@
 		--main-text-color: black;
 		--main-card-bg-color: white;
 		--main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 20%);
-		--main-table-header-bg-color: #808080;
 		--main-input-bg-color: white;
 	}

@@ -40,18 +37,17 @@
 		--main-text-color: white;
 		--main-card-bg-color: #202020;
 		--main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 80%), 0 2px 10px 0 rgb(0 0 0 / 80%);
-		--main-table-header-bg-color: black;
 		--main-input-bg-color: #404040;
 	}
 }

-html {
+* {
 	box-sizing: border-box;
-	background-color: var(--main-bg-color);
+	font-family: monospace;
 }

-* {
-	font-family: monospace;
+html {
+	background-color: var(--main-bg-color);
 }

 body {
@@ -77,33 +73,24 @@ main {
 	margin-top: 16px;
 }

-th {
-	background-color: var(--main-table-header-bg-color);
-}
-
-td {
-	background-color: var(--main-card-bg-color);
-}
-
-input, select, textarea {
-	background-color: var(--main-input-bg-color);
-	color: var(--main-text-color);
-}
-
-img.clickable, svg.clickable {
-	cursor: pointer;
-}
-
 img, svg {
 	height: 1em;
 	width: 1em;
 	color: var(--main-text-color)
 }

-hr, * {
+a img {
+	vertical-align: unset;
+}
+
+hr {
 	border-color: var(--main-text-color);
 }

+.clickable {
+	cursor: pointer;
+}
+
 .flex {
 	display: flex;
 }
@@ -114,6 +101,12 @@ hr, * {
 	align-items: center;
 }

+.column-reverse {
+	flex-direction: column-reverse;
+	row-gap: 10px;
+	align-items: center;
+}
+
 .wrap {
 	flex-wrap: wrap;
 	row-gap: 10px;
@@ -156,18 +149,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;}
 }
--- 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">
--- a/web/html/config.html
+++ b/web/html/config.html
@@ -5,7 +5,6 @@
 		<script src="scripts/config.js" type="module"></script>
 		<script src="scripts/draggable.js" type="module"></script>
 		<script src="modules/Sortable.min.js"></script>
-		<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
 		<link rel="modulepreload" href="scripts/utils.js">
 		<link rel="modulepreload" href="scripts/dialog.js">
 		<style>
--- 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>
@@ -36,13 +74,13 @@
 				<div class="w3-card w3-padding">
 					<div class="flex row nowrap" style="margin-top: 1em; justify-content: space-between;">
 						<form id="vm-search" role="search" class="flex row nowrap" tabindex="0">
-							<svg role="img" aria-label="Search Instances"><use href="images/common/search.svg#symb"></use></svg>
+							<img alt="Search Instances" aria-label="Search Instances" src="images/common/search.svg#symb">
 							<input type="search" id="search" class="w3-input w3-border" style="height: 1lh; max-width: fit-content;" aria-label="search instances by name">
 						</form>
 						<!--Add Instance Button & Dialog Template-->
 						<button type="button" id="instance-add" class="w3-button" aria-label="create new instance">
 							<span class="large" style="margin: 0;">Create Instance</span>
-							<svg class="small" style="height: 1lh; width: 1lh;" role="img" aria-label="Create New Instance"><use href="images/actions/instance/add.svg#symb"></use></svg>
+							<img class="small" style="height: 1lh; width: 1lh;" alt="Create Instance" aria-label="Create Instance" src="images/actions/instance/add.svg#symb">
 						</button>
 						<template id="create-instance-dialog">
 							<dialog class="w3-container w3-card w3-border-0">
@@ -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 m2 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 m2 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" .}}
--- a/web/images/common/blank.png
+++ b/web/images/common/blank.png
--- a/web/images/common/blank.svg
+++ b/web/images/common/blank.svg
@@ -0,0 +1 @@
+<svg id="symb" role="img" aria-label="cpu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>
--- a/web/modules/Sortable.min.js
+++ b/web/modules/Sortable.min.js
--- a/web/modules/w3.css
+++ b/web/modules/w3.css
@@ -1,4 +1,4 @@
-/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
+/* W3.CSS 5.02 March 31 2025 by Jan Egil and Borge Refsnes */
 html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
 /* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
 html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
@@ -108,6 +108,8 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px}
 .w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}
 .w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}
+.w3-grid{display:grid}.w3-grid-padding{display:grid;gap:16px}.w3-flex{display:flex}
+.w3-text-center{text-align:center}.w3-text-bold,.w3-bold{font-weight:bold}.w3-text-italic,.w3-italic{font-style:italic}
 .w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px}
 .w3-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}
 .w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}
@@ -148,6 +150,7 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-button:hover{color:#000!important;background-color:#ccc!important}
 .w3-transparent,.w3-hover-none:hover{background-color:transparent!important}
 .w3-hover-none:hover{box-shadow:none!important}
+.w3-rtl{direction:rtl}.w3-ltr{direction:ltr}
 /* Colors */
 .w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
 .w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
@@ -175,6 +178,19 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important}
 .w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
 .w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
+.w3-asphalt,.w3-hover-asphalt:hover{color:#fff!important;background-color:#343a40!important}
+.w3-crimson,.w3-hover-crimson:hover{color:#fff!important;background-color:#a20025!important}
+.w3-cobalt,w3-hover-cobalt:hover{color:#fff!important;background-color:#0050ef!important}
+.w3-emerald,.w3-hover-emerald:hover{color:#fff!important;background-color:#008a00!important}
+.w3-olive,.w3-hover-olive:hover{color:#fff!important;background-color:#6d8764!important}
+.w3-paper,.w3-hover-paper:hover{color:#000!important;background-color:#f8f9fa!important}
+.w3-sienna,.w3-hover-sienna:hover{color:#fff!important;background-color:#a0522d!important}
+.w3-taupe,.w3-hover-taupe:hover{color:#fff!important;background-color:#87794e!important}
+.w3-danger{color:#fff!important;background-color:#dd0000!important}
+.w3-note{color:#000!important;background-color:#fff599!important}
+.w3-info{color:#fff!important;background-color:#0a6fc2!important}
+.w3-warning{color:#000!important;background-color:#ffb305!important}
+.w3-success{color:#fff!important;background-color:#008a00!important}
 .w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
 .w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
 .w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
@@ -232,4 +248,4 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-border-light-grey,.w3-hover-border-light-grey:hover,.w3-border-light-gray,.w3-hover-border-light-gray:hover{border-color:#f1f1f1!important}
 .w3-border-dark-grey,.w3-hover-border-dark-grey:hover,.w3-border-dark-gray,.w3-hover-border-dark-gray:hover{border-color:#616161!important}
 .w3-border-pale-red,.w3-hover-border-pale-red:hover{border-color:#ffe7e7!important}.w3-border-pale-green,.w3-hover-border-pale-green:hover{border-color:#e7ffe7!important}
-.w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important}
+.w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important}
--- a/web/modules/wfa.js
+++ b/web/modules/wfa.js
--- a/web/modules/wfa.wasm
+++ b/web/modules/wfa.wasm
--- a/web/scripts/config.js
+++ b/web/scripts/config.js
@@ -1,4 +1,4 @@
-import { requestPVE, requestAPI, goToPage, getURIData, setAppearance, setSVGSrc, requestDash } from "./utils.js";
+import { requestPVE, requestAPI, goToPage, getURIData, setAppearance, setIconSrc, requestDash } from "./utils.js";
 import { alert, dialog } from "./dialog.js";

 window.addEventListener("DOMContentLoaded", init);
@@ -48,8 +48,8 @@ class VolumeAction extends HTMLElement {
 	}

 	async setStatusLoading () {
-		const svg = document.querySelector(`svg[data-volume="${this.dataset.volume}"]`);
-		setSVGSrc(svg, "images/status/loading.svg");
+		const icon = document.querySelector(`img[data-volume="${this.dataset.volume}"]`);
+		setIconSrc(icon, "images/status/loading.svg");
 	}

 	async handleDiskDetach () {
@@ -247,8 +247,8 @@ class NetworkAction extends HTMLElement {
 	}

 	async setStatusLoading () {
-		const svg = document.querySelector(`svg[data-network="${this.dataset.network}"]`);
-		setSVGSrc(svg, "images/status/loading.svg");
+		const icon = document.querySelector(`img[data-network="${this.dataset.network}"]`);
+		setIconSrc(icon, "images/status/loading.svg");
 	}

 	async handleNetworkConfig () {
@@ -277,7 +277,7 @@ class NetworkAction extends HTMLElement {
 		const netID = this.dataset.network;
 		dialog(this.template, async (result, form) => {
 			if (result === "confirm") {
-				setSVGSrc(document.querySelector(`svg[data-network="${netID}"]`), "images/status/loading.svg");
+				setIconSrc(document.querySelector(`svg[data-network="${netID}"]`), "images/status/loading.svg");
 				const net = `${netID}`;
 				const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/net/${net}/delete`, "DELETE");
 				if (result.status !== 200) {
@@ -349,8 +349,8 @@ class DeviceAction extends HTMLElement {
 	}

 	async setStatusLoading () {
-		const svg = document.querySelector(`svg[data-device="${this.dataset.device}"]`);
-		setSVGSrc(svg, "images/status/loading.svg");
+		const icon = document.querySelector(`img[data-device="${this.dataset.device}"]`);
+		setIconSrc(icon, "images/status/loading.svg");
 	}

 	async handleDeviceConfig () {
@@ -449,7 +449,7 @@ async function refreshBoot () {
 	if (boot.status !== 200) {
 		alert("Error fetching instance boot order.");
 	}
-	else {
+	else if (type === "qemu") {
 		boot = boot.data;
 		const order = document.querySelector("#boot-order");
 		order.setHTMLUnsafe(boot);
--- a/web/scripts/dialog.js
+++ b/web/scripts/dialog.js
@@ -42,23 +42,114 @@ export function dialog (template, onclose = async (result, form) => { }) {
 }

 export function alert (message) {
-	const dialog = document.createElement("dialog");
-	dialog.innerHTML = `
-		<form method="dialog">
-			<p class="w3-center" style="margin-bottom: 0px;">${message}</p>
-			<div class="w3-center">
-				<button class="w3-button w3-margin" id="submit">OK</button>
-			</div>
-		</form>
-	`;
-	dialog.className = "w3-container w3-card w3-border-0";
+	const dialog = document.querySelector("#alert-dialog");
+	if (dialog == null) {
+		const dialog = document.createElement("dialog");
+		dialog.id = "alert-dialog";
+		dialog.innerHTML = `
+			<form method="dialog">
+				<p class="w3-center" style="margin-bottom: 0px;">${message}</p>
+				<div class="w3-center">
+					<button class="w3-button w3-margin" id="submit">OK</button>
+				</div>
+			</form>
+		`;
+		dialog.className = "w3-container w3-card w3-border-0";
+		document.body.append(dialog);
+		dialog.showModal();
+		dialog.addEventListener("close", () => {
+			dialog.parentElement.removeChild(dialog);
+		});
+		return dialog;
+	}
+	else {
+		console.error("Attempted to create a new alert while one already exists!");
+		return null;
+	}
+}

-	document.body.append(dialog);
-	dialog.showModal();
+class ErrorDialog extends HTMLElement {
+	shadowRoot = null;
+	dialog = null;
+	errors = null;

-	dialog.addEventListener("close", () => {
-		dialog.parentElement.removeChild(dialog);
-	});
+	constructor () {
+		super();
+		this.shadowRoot = this.attachShadow({ mode: "open" });
+		this.shadowRoot.innerHTML = `
+			<link rel="stylesheet" href="modules/w3.css">
+			<link rel="stylesheet" href="css/style.css">
+			<link rel="stylesheet" href="css/form.css">
+			<style>
+				#errors {
+					margin-bottom: 0px; 
+					max-height: 20lh; 
+					min-height: 20lh; 
+					overflow-y: scroll;
+				}
+				#errors * {
+					margin: 0px;
+				}
+			</style>
+			<dialog class="w3-container w3-card w3-border-0">
+				<form method="dialog">
+					<p class="w3-large" id="prompt" style="text-align: center;">Error</p>
+					<div id="errors" class="flex column-reverse"></div>
+					<div class="w3-center" id="controls">
+						<button class="w3-button w3-margin" type="submit" value="ok">OK</button>
+						<button class="w3-button w3-margin" type="submit" value="copy">Copy</button>
+					</div>
+				</form>
+			</dialog>
+		`;
+		this.dialog = this.shadowRoot.querySelector("dialog");
+		this.errors = this.shadowRoot.querySelector("#errors");

+		for (const control of this.shadowRoot.querySelector("#controls").childNodes) {
+			control.addEventListener("click", async (e) => {
+				e.preventDefault();
+				this.dialog.close(e.target.value);
+			});
+		}
+
+		this.dialog.addEventListener("close", () => {
+			if (this.dialog.returnValue === "ok") {}
+			else if (this.dialog.returnValue === "copy") {
+				let errors = "";
+				for (const error of this.errors.childNodes) {
+					errors += `${error.innerText}\n`;
+				}
+				navigator.clipboard.writeText(errors);
+			}
+			this.parentElement.removeChild(this);
+		});
+	}
+
+	appendError (error) {
+		error = `${(new Date()).toUTCString()}: ${error}`;
+		const p = document.createElement("p");
+		p.innerText = error;
+		this.errors.appendChild(p);
+	}
+
+	showModal () {
+		this.dialog.showModal();
+	}
+}
+
+customElements.define("error-dialog", ErrorDialog);
+
+export function error (message) {
+	let dialog = document.querySelector("error-dialog");
+	if (dialog == null) {
+		dialog = document.createElement("error-dialog");
+		document.body.append(dialog);
+		dialog.appendError(message);
+		dialog.showModal();
+	}
+	else {
+		dialog.appendError(message);
+		dialog.showModal();
+	}
 	return dialog;
 }
--- a/web/scripts/draggable.js
+++ b/web/scripts/draggable.js
@@ -1,4 +1,5 @@
 const blank = document.createElement("img");
+blank.src = "images/common/blank.png"; // for whatever reason an svg does NOT work here

 class DraggableContainer extends HTMLElement {
 	shadowRoot = null;
@@ -48,7 +49,7 @@ class DraggableContainer extends HTMLElement {

 	get value () {
 		const value = [];
-		this.content.childNodes.forEach((element) => {
+		this.content.querySelectorAll(".draggable-item").forEach((element) => {
 			if (element.dataset.value) {
 				value.push(element.dataset.value);
 			}
--- a/web/scripts/index.js
+++ b/web/scripts/index.js
@@ -1,5 +1,5 @@
-import { requestPVE, requestAPI, setAppearance, getSearchSettings, requestDash, setSVGSrc, setSVGAlt } from "./utils.js";
-import { alert, dialog } from "./dialog.js";
+import { requestPVE, requestAPI, setAppearance, getSearchSettings, requestDash, setIconSrc, setIconAlt } from "./utils.js";
+import { alert, dialog, error } from "./dialog.js";
 import { setupClientSync } from "./clientsync.js";
 import wfaInit from "../modules/wfa.js";

@@ -120,25 +120,29 @@ class InstanceCard extends HTMLElement {
 		}

 		const powerButton = this.shadowRoot.querySelector("#power-btn");
-		if (powerButton.classList.contains("clickable")) {
-			powerButton.onclick = this.handlePowerButton.bind(this);
-			powerButton.onkeydown = (event) => {
-				if (event.key === "Enter") {
-					event.preventDefault();
-					this.handlePowerButton();
-				}
-			};
+		if (powerButton !== null) {
+			if (powerButton.classList.contains("clickable")) {
+				powerButton.onclick = this.handlePowerButton.bind(this);
+				powerButton.onkeydown = (event) => {
+					if (event.key === "Enter") {
+						event.preventDefault();
+						this.handlePowerButton();
+					}
+				};
+			}
 		}

 		const deleteButton = this.shadowRoot.querySelector("#delete-btn");
-		if (deleteButton.classList.contains("clickable")) {
-			deleteButton.onclick = this.handleDeleteButton.bind(this);
-			deleteButton.onkeydown = (event) => {
-				if (event.key === "Enter") {
-					event.preventDefault();
-					this.handleDeleteButton();
-				}
-			};
+		if (deleteButton !== null) {
+			if (deleteButton.classList.contains("clickable")) {
+				deleteButton.onclick = this.handleDeleteButton.bind(this);
+				deleteButton.onkeydown = (event) => {
+					if (event.key === "Enter") {
+						event.preventDefault();
+						this.handleDeleteButton();
+					}
+				};
+			}
 		}
 	}

@@ -146,10 +150,10 @@ class InstanceCard extends HTMLElement {
 		this.status = "loading";
 		const statusicon = this.shadowRoot.querySelector("#status");
 		const powerbtn = this.shadowRoot.querySelector("#power-btn");
-		setSVGSrc(statusicon, "images/status/loading.svg");
-		setSVGAlt(statusicon, "instance is loading");
-		setSVGSrc(powerbtn, "images/status/loading.svg");
-		setSVGAlt(powerbtn, "");
+		setIconSrc(statusicon, "images/status/loading.svg");
+		setIconAlt(statusicon, "instance is loading");
+		setIconSrc(powerbtn, "images/status/loading.svg");
+		setIconAlt(powerbtn, "");
 	}

 	async handlePowerButton () {
@@ -219,7 +223,7 @@ async function getInstancesFragment () {
 async function refreshInstances () {
 	let instances = await getInstancesFragment();
 	if (instances.status !== 200) {
-		alert("Error fetching instances.");
+		error(`Error fetching instances: ${instances.status} ${instances.error !== undefined ? instances.error : ""}`);
 	}
 	else {
 		instances = instances.data;
@@ -253,9 +257,9 @@ function sortInstances () {
 			if (substrInc) {
 				const substrStartIndex = item.indexOf(query);
 				const queryLength = query.length;
-				const remaining = item.length - substrInc - queryLength;
+				const remaining = item.length - substrInc - queryLength + 1;
 				const alignment = `${"X".repeat(substrStartIndex)}${"M".repeat(queryLength)}${"X".repeat(remaining)}`;
-				return { score: 1, alignment };
+				return { score: -1, alignment };
 			}
 			else {
 				const alignment = `${"X".repeat(item.length)}`;
@@ -272,8 +276,8 @@ function sortInstances () {
 		};
 		criteria = (item, query) => {
 			// lower is better
-			const { score, CIGAR } = global.wfAlign(query, item, penalties, true);
-			const alignment = global.DecodeCIGAR(CIGAR);
+			const { score, CIGAR } = global.wfa.wfAlign(query, item, penalties, true);
+			const alignment = global.wfa.DecodeCIGAR(CIGAR);
 			return { score: score / item.length, alignment };
 		};
 	}
--- a/web/scripts/utils.js
+++ b/web/scripts/utils.js
@@ -192,15 +192,10 @@ export function setAppearance () {
 }

 // assumes href is path to svg, and id to grab is #symb
-export function setSVGSrc (svgElem, href) {
-	let useElem = svgElem.querySelector("use");
-	if (!useElem) {
-		useElem = document.createElementNS("http://www.w3.org/2000/svg", "use");
-	}
-	useElem.setAttribute("href", `${href}#symb`);
-	svgElem.append(useElem);
+export function setIconSrc (icon, path) {
+	icon.setAttribute("src", path);
 }

-export function setSVGAlt (svgElem, alt) {
-	svgElem.setAttribute("aria-label", alt);
+export function setIconAlt (icon, alt) {
+	icon.setAttribute("alt", alt);
 }
--- a/web/templates/backups.go.tmpl
+++ b/web/templates/backups.go.tmpl
@@ -2,7 +2,6 @@
 <backup-card data-volid="{{.Volid}}">
 	<template shadowrootmode="open">
 		<link rel="stylesheet" href="modules/w3.css">
-		<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
 		<link rel="stylesheet" href="css/style.css">
 		<style>
 			* {
@@ -14,19 +13,15 @@
 				margin: 0px;
 				padding: 0px;
 			}
-			svg {
-				height: 1em;
-				width: 1em;
-			}
 		</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>
-				<svg id="restore-btn" class="clickable" aria-label="restore from backup" role="button" tabindex=0><use href="images/actions/backups/restore.svg#symb"></svg>
+				<img id="edit-btn" class="clickable" alt="change notes" src="images/actions/backups/config.svg#symb">
+				<img id="delete-btn" class="clickable" alt="delete backup" role="button" tabindex=0 src="images/actions/backups/delete-active.svg#symb">
+				<img id="restore-btn" class="clickable" alt="restore from backup" role="button" tabindex=0 src="images/actions/backups/restore.svg#symb">
 			</div>
 		</div>
 		<template id="edit-dialog">
@@ -101,7 +96,7 @@
 {{define "backups-add-backup"}}
 <button type="button" id="backup-add" class="w3-button" aria-label="Create Backup">
 	<span class="large" style="margin: 0;">Create Backup</span>
-	<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Create Backup"><use href="images/actions/network/add.svg#symb"></use></svg>
+	<img class="small" role="img" style="height: 1lh; width: 1lh;" alt="Create Backup" src="images/actions/network/add.svg#symb">
 </button>
 <template id="create-backup-dialog">
 	<link rel="stylesheet" href="modules/w3.css">
--- a/web/templates/base.go.tmpl
+++ b/web/templates/base.go.tmpl
@@ -4,7 +4,6 @@
 <title>{{.global.Organization}} - dashboard</title>
 <link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
 <link rel="stylesheet" href="modules/w3.css">
-<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
 <script>
 	window.PVE = "{{.global.PVE}}";
 	window.API = "{{.global.API}}";
--- a/web/templates/config.go.tmpl
+++ b/web/templates/config.go.tmpl
@@ -1,26 +1,26 @@
 {{define "proctype-input"}}
-<svg aria-label="CPU Type"><use href="images/resources/cpu.svg#symb"></svg>
+<img alt="CPU Type" src="images/resources/cpu.svg#symb">
 <label for="proctype">CPU Type</label>
 {{template "select" .}}
 <div></div>
 {{end}}

 {{define "cores-input"}}
-<svg aria-label="CPU Amount"><use href="images/resources/cpu.svg#symb"></svg>
+<img alt="CPU Amount" src="images/resources/cpu.svg#symb">
 <label for="cores">CPU Amount</label>
 <input id="cores" name="cores" class="w3-input w3-border" type="number" required value="{{.}}">
 <p>Cores</p>
 {{end}}

 {{define "memory-input"}}
-<svg aria-label="Memory Amount"><use href="images/resources/ram.svg#symb"></svg>
+<img alt="Memory Amount" src="images/resources/ram.svg#symb">
 <label for="ram">Memory</label>
 <input id="ram" name="ram" class="w3-input w3-border" type="number" required value="{{.}}">
 <p>MiB</p>
 {{end}}

 {{define "swap-input"}}
-<svg aria-label="Swap Amount"><use href="images/resources/swap.svg#symb"></svg>
+<img alt="Swap Amount" src="images/resources/swap.svg#symb">
 <label for="swap">Swap</label>
 <input id="swap" name="swap" class="w3-input w3-border" type="number" required value="{{.}}">
 <p>MiB</p>
@@ -46,7 +46,7 @@
 {{define "volumes-add-disk"}}
 <button type="button" id="disk-add" class="w3-button" aria-label="Add New Disk">
 	<span class="large" style="margin: 0;">Add Disk</span>
-	<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New Disk"><use href="images/actions/disk/add-disk.svg#symb"></use></svg>
+	<img class="small" style="height: 1lh; width: 1lh;" alt="Add New Disk" src="images/actions/disk/add-disk.svg#symb">
 </button>
 <template id="add-disk-dialog">
 	<dialog class="w3-container w3-card w3-border-0">
@@ -75,7 +75,7 @@
 {{define "volumes-add-cd"}}
 <button type="button" id="cd-add" class="w3-button" aria-label="Add New CD">
 	<span class="large" style="margin: 0;">Mount CD</span>
-	<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New CDROM"><use href="images/actions/disk/add-cd.svg#symb"></use></svg>
+	<img class="small" style="height: 1lh; width: 1lh;" alt="Add New CDROM" src="images/actions/disk/add-cd.svg#symb">
 </button>
 <template id="add-cd-dialog">
 	<dialog class="w3-container w3-card w3-border-0">
@@ -97,7 +97,7 @@
 {{end}}

 {{define "volume-rootfs"}}
-<svg data-volume={{.Name}} xmlns="http://www.w3.org/2000/svg" aria-label="Drive"><use href="images/resources/drive.svg#symb"></svg>
+<img data-volume={{.Name}} alt="Drive" src="images/resources/drive.svg#symb">
 <p>{{.Name}}</p>
 <p>{{.Volume.File}}</p>
 <div>
@@ -109,7 +109,7 @@
 {{end}}

 {{define "volume-mp"}}
-<svg data-volume={{.Name}} xmlns="http://www.w3.org/2000/svg" aria-label="Drive"><use href="images/resources/drive.svg#symb"></svg>
+<img data-volume={{.Name}} alt="Drive" src="images/resources/drive.svg#symb">
 <p>{{.Name}}</p>
 <p>{{.Volume.File}}</p>
 <div>
@@ -121,7 +121,7 @@
 {{end}}

 {{define "volume-ide"}}
-<svg data-volume={{.Name}} xmlns="http://www.w3.org/2000/svg" aria-label="Drive"><use href="images/resources/drive.svg#symb"></svg>
+<img data-volume={{.Name}} alt="Drive" src="images/resources/drive.svg#symb">
 <p>{{.Name}}</p>
 <p>{{.Volume.File}}</p>
 <div>
@@ -133,7 +133,7 @@
 {{end}}

 {{define "volume-scsi"}}
-<svg data-volume={{.Name}} xmlns="http://www.w3.org/2000/svg" aria-label="Drive"><use href="images/resources/drive.svg#symb"></svg>
+<img data-volume={{.Name}} alt="Drive" src="images/resources/drive.svg#symb">
 <p>{{.Name}}</p>
 <p>{{.Volume.File}}</p>
 <div>
@@ -145,7 +145,7 @@
 {{end}}

 {{define "volume-unused"}}
-<svg data-volume={{.Name}} xmlns="http://www.w3.org/2000/svg" aria-label="Drive"><use href="images/resources/drive.svg#symb"></svg>
+<img data-volume={{.Name}} alt="Drive" src="images/resources/drive.svg#symb">
 <p>{{.Name}}</p>
 <p>{{.Volume.File}}</p>
 <div>
@@ -160,7 +160,7 @@
 <volume-action data-type="move" data-volume="{{.Name}}">
 	<template shadowrootmode="open">
 		<link rel="stylesheet" href="css/style.css">
-		<svg class="clickable" aria-label="Move {{.Name}}"><use href="images/actions/disk/move-active.svg#symb"></svg>
+		<img class="clickable" alt="Move {{.Name}}" src="images/actions/disk/move-active.svg#symb">
 		<template id="dialog-template">
 			<dialog class="w3-container w3-card w3-border-0">
 				<p class="w3-large" id="prompt" style="text-align: center;">
@@ -186,7 +186,7 @@
 <volume-action data-type="none" data-volume="{{.Name}}">
 	<template shadowrootmode="open">
 		<link rel="stylesheet" href="css/style.css">
-		<svg aria-label=""><use href="images/actions/disk/move-inactive.svg#symb"></svg>
+		<img alt="" src="images/actions/disk/move-inactive.svg#symb">
 	</template>
 </volume-action>
 {{end}}
@@ -195,7 +195,7 @@
 <volume-action data-type="resize" data-volume="{{.Name}}">
 	<template shadowrootmode="open">
 		<link rel="stylesheet" href="css/style.css">
-		<svg class="clickable" aria-label="Resize {{.Name}}"><use href="images/actions/disk/resize-active.svg#symb"></svg>
+		<img class="clickable" alt="Resize {{.Name}}" src="images/actions/disk/resize-active.svg#symb">
 		<template id="dialog-template">
 			<dialog class="w3-container w3-card w3-border-0">
 				<p class="w3-large" id="prompt" style="text-align: center;">
@@ -221,7 +221,7 @@
 <volume-action data-type="none" data-volume="{{.Name}}">
 	<template shadowrootmode="open">
 		<link rel="stylesheet" href="css/style.css">
-		<svg aria-label=""><use href="images/actions/disk/resize-inactive.svg#symb"></svg>
+		<img alt="" src="images/actions/disk/resize-inactive.svg#symb">
 	</template>
 </volume-action>
 {{end}}
@@ -230,7 +230,7 @@
 <volume-action data-type="delete" data-volume="{{.Name}}">
 	<template shadowrootmode="open">
 		<link rel="stylesheet" href="css/style.css">
-		<svg class="clickable" aria-label="Delete {{.Name}}"><use href="images/actions/disk/delete-active.svg#symb"></svg>
+		<img class="clickable" alt="Delete {{.Name}}" src="images/actions/disk/delete-active.svg#symb">
 		<template id="dialog-template">
 			<dialog class="w3-container w3-card w3-border-0">
 				<p class="w3-large" id="prompt" style="text-align: center;">
@@ -255,7 +255,7 @@
 <volume-action data-type="none" data-volume="{{.Name}}">
 	<template shadowrootmode="open">
 		<link rel="stylesheet" href="css/style.css">
-		<svg aria-label=""><use href="images/actions/disk/delete-inactive.svg#symb"></svg>
+		<img alt="" src="images/actions/disk/delete-inactive.svg#symb">
 	</template>
 </volume-action>
 {{end}}
@@ -264,7 +264,7 @@
 <volume-action data-type="attach" data-volume="{{.Name}}">
 	<template shadowrootmode="open">
 		<link rel="stylesheet" href="css/style.css">
-		<svg class="clickable" aria-label="Attach {{.Name}}"><use href="images/actions/disk/attach.svg#symb"></svg>
+		<img class="clickable" alt="Attach {{.Name}}" src="images/actions/disk/attach.svg#symb">
 		<template id="dialog-template">
 			<dialog class="w3-container w3-card w3-border-0">
 				<p class="w3-large" id="prompt" style="text-align: center;">
@@ -297,7 +297,7 @@
 <volume-action data-type="detach" data-volume="{{.Name}}">
 	<template shadowrootmode="open">
 		<link rel="stylesheet" href="css/style.css">
-		<svg class="clickable" aria-label="Detach {{.Name}}"><use href="images/actions/disk/detach.svg#symb"></svg>
+		<img class="clickable" alt="Detach {{.Name}}" src="images/actions/disk/detach.svg#symb">
 		<template id="dialog-template">
 			<dialog class="w3-container w3-card w3-border-0">
 				<p class="w3-large" id="prompt" style="text-align: center;">
@@ -322,7 +322,7 @@
 <volume-action data-type="none">
 	<template shadowrootmode="open">
 		<link rel="stylesheet" href="css/style.css">
-		<svg aria-label=""></svg>
+		<img alt="" src="images/common/blank.svg">
 	</template>
 </volume-action>
 {{end}}
@@ -336,7 +336,7 @@
 {{define "nets-add-net"}}
 <button type="button" id="network-add" class="w3-button" aria-label="Add New Network Interface">
 	<span class="large" style="margin: 0;">Add Network</span>
-	<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New Network Interface"><use href="images/actions/network/add.svg#symb"></use></svg>
+	<img class="small" style="height: 1lh; width: 1lh;" alt="Add New Network Interface" src="images/actions/network/add.svg#symb">
 </button>
 <template id="add-net-dialog">
 	<dialog class="w3-container w3-card w3-border-0">
@@ -361,14 +361,14 @@
 {{end}}

 {{define "net"}}
-<svg data-network="{{.Net_ID}}" aria-label="Net {{.Net_ID}}"><use href="images/resources/network.svg#symb"></svg>
+<img data-network="{{.Net_ID}}" alt="Net {{.Net_ID}}" src="images/resources/network.svg#symb">
 <p>{{.Net_ID}}</p>
 <p>{{.Value}}</p>
 <div>
 	<network-action data-type="config" data-network="{{.Net_ID}}" data-value="{{.Value}}">
 		<template shadowrootmode="open">
 			<link rel="stylesheet" href="css/style.css">
-			<svg class="clickable" aria-label="Configure Net {{.Net_ID}}"><use href="images/actions/network/config.svg#symb"></svg>
+			<img class="clickable" alt="Configure Net {{.Net_ID}}" src="images/actions/network/config.svg#symb">
 			<template id="dialog-template">
 				<dialog class="w3-container w3-card w3-border-0">
 					<p class="w3-large" id="prompt" style="text-align: center;">
@@ -390,7 +390,7 @@
 	<network-action data-type="delete" data-network="{{.Net_ID}}" data-value="{{.Value}}">
 		<template shadowrootmode="open">
 			<link rel="stylesheet" href="css/style.css">
-			<svg class="clickable" aria-label="Delete Net {{.Net_ID}}"><use href="images/actions/network/delete-active.svg#symb"></svg>
+			<img class="clickable" alt="Delete Net {{.Net_ID}}" src="images/actions/network/delete-active.svg#symb">
 			<template id="dialog-template">
 				<dialog class="w3-container w3-card w3-border-0">
 					<p class="w3-large" id="prompt" style="text-align: center;">
@@ -421,7 +421,7 @@
 {{define "devices-add-device"}}
 <button type="button" id="device-add" class="w3-button" aria-label="Add New PCIe Device">
 	<span class="large" style="margin: 0;">Add Device</span>
-	<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New PCIe Device"><use href="images/actions/device/add.svg#symb"></use></svg>
+	<img class="small" style="height: 1lh; width: 1lh;" alt="Add New PCIe Device" src="images/actions/device/add.svg#symb">
 </button>
 <template id="add-device-dialog">
 	<dialog class="w3-container w3-card w3-border-0">
@@ -444,14 +444,14 @@
 {{end}}

 {{define "device"}}
-<svg data-device="{{.Device_ID}}" aria-label="Device {{.Device_ID}}"><use href="images/resources/device.svg#symb"></svg>
+<img data-device="{{.Device_ID}}" alt="Device {{.Device_ID}}" src="images/resources/device.svg#symb">
 <p>{{.Device_ID}}</p>
 <p>{{.Device_Name}}</p>
 <div>
 	<device-action data-type="config" data-device="{{.Device_ID}}" data-value="{{.Value}}">
 		<template shadowrootmode="open">
 			<link rel="stylesheet" href="css/style.css">
-			<svg class="clickable" aria-label="Configure Device {{.Device_ID}}"><use href="images/actions/device/config.svg#symb"></svg>
+			<img class="clickable" alt="Configure Device {{.Device_ID}}" src="images/actions/device/config.svg#symb">
 			<template id="dialog-template">
 				<dialog class="w3-container w3-card w3-border-0">
 					<p class="w3-large" id="prompt" style="text-align: center;">
@@ -473,7 +473,7 @@
 	<device-action data-type="delete" data-device="{{.Device_ID}}" data-value="{{.Value}}">
 		<template shadowrootmode="open">
 			<link rel="stylesheet" href="css/style.css">
-			<svg class="clickable" aria-label="Delete Device {{.Device_ID}}"><use href="images/actions/device/delete-active.svg#symb"></svg>
+			<img class="clickable" alt="Delete Device {{.Device_ID}}" src="images/actions/device/delete-active.svg#symb">
 			<template id="dialog-template">
 				<dialog class="w3-container w3-card w3-border-0">
 					<p class="w3-large" id="prompt" style="text-align: center;">
@@ -537,15 +537,15 @@
 {{define "boot-target"}}
 {{if .volume_id}}
 <div class="draggable-item" data-value="{{.volume_id}}" style="display: grid; grid-template-columns: auto auto 8ch 1fr; column-gap: 10px; align-items: center;">
-	<svg aria-label="Drag"><use href="images/actions/drag.svg#symb"></use></svg>
-	<svg aria-label="Volume"><use href="images/resources/drive.svg#symb"></use></svg>
+	<img style="height: 1em; width: 1em" alt="Drag" src="images/actions/drag.svg#symb">
+	<img style="height: 1em; width: 1em" alt="Volume" src="images/resources/drive.svg#symb">
 	<p style="margin: 0px;">{{.volume_id}}</p>
 	<p style="margin: 0px; overflow: hidden; white-space: nowrap;">{{.file}}</p>
 </div>
 {{else if .net_id}}
 <div class="draggable-item" data-value="{{.net_id}}" style="display: grid; grid-template-columns: auto auto 8ch 1fr; column-gap: 10px; align-items: center;">
-	<svg aria-label="Drag"><use href="images/actions/drag.svg#symb"></use></svg>
-	<svg aria-label="Net"><use href="images/resources/network.svg#symb"></use></svg>
+	<img style="height: 1em; width: 1em" alt="Drag" src="images/actions/drag.svg#symb">
+	<img style="height: 1em; width: 1em" alt="Net" src="images/resources/network.svg#symb">
 	<p style="margin: 0px;">{{.net_id}}</p>
 	<p style="margin: 0px; overflow: hidden; white-space: nowrap;">{{.value}}</p>
 </div>
--- a/web/templates/instance-card.go.tmpl
+++ b/web/templates/instance-card.go.tmpl
@@ -2,80 +2,113 @@
 <instance-card data-type="{{.Type}}" data-status="{{.Status}}" data-vmid="{{.VMID}}" data-name="{{.Name}}" data-node="{{.Node}}" data-nodestatus="{{.NodeStatus}}">
 	<template shadowrootmode="open">
 		<link rel="stylesheet" href="modules/w3.css">
-		<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
 		<link rel="stylesheet" href="css/style.css">
 		<style>
 			* {
 				margin: 0;
+				padding: 0;
+				width: fit-content;
 			}
-			a {
+			a, svg, img {
+				line-height: 1em;
 				height: 1em;
 				width: 1em;
 				margin: 0px;
 				padding: 0px;
 			}
-			svg {
-				height: 1em;
-				width: 1em;
+			a img {
+				vertical-align: unset;
+			}
+			#instance-name {
+				overflow-x: hidden;
+				min-width: 0;
+				width: auto;
+				white-space: nowrap;
+			}
+			.flex { /* needed for some reason to avoid a flickering issue on chrome ONLY */
+				display: flex;
+			}
+			.row { /* needed for some reason to avoid a flickering issue on chrome ONLY */
+				flex-direction: row;
+				column-gap: 10px;
+				align-items: center;
+			}
+			.nowrap { /* needed for some reason to avoid a flickering issue on chrome ONLY */
+				flex-wrap: nowrap;
+			}
+			@media screen and (width >=993px) {
+				.hide-large {display: none !important;}
+			}
+			@media screen and (width <=993px) and (width >=601px){
+				.hide-large {display: none !important;}
+				.hide-medium {display:none !important}
+			}
+			@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;}
 			}
 		</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 m2 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 m2 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"}}
+				<img id="status" alt="instance is running" src="images/status/active.svg#symb">
+			{{else if eq .Status "stopped"}}
+				<img id="status" alt="instance is stopped" src="images/status/inactive.svg#symb">
+			{{else if eq .Status "loading"}}
+				<img id="status" alt="instance is loading" src="images/status/loading.svg#symb">
+			{{else}}
+				<img id="status" alt="instance is loading" src="images/status/loading.svg#symb">
+			{{end}}
+			<p>{{.Status}}</p>
+		</div>
+		<p class="hide-medium">{{.Node}}</p>
+		<div class="flex row nowrap hide-medium">
+			{{if eq .NodeStatus "online"}}
+				<img alt="node is online" src="images/status/active.svg#symb">
+			{{else if eq .NodeStatus "offline"}}
+				<img alt="node is offline" src="images/status/inactive.svg#symb">
+			{{else if eq .NodeStatus "unknown"}}
+				<img alt="node is offline" src="images/status/inactive.svg#symb">
+			{{else}}
+			{{end}}
+			<p>{{.NodeStatus}}</p>
+		</div>
+		<div class="flex row nowrap" style="height: 1lh;">
+			{{if and (eq .NodeStatus "online") (eq .Status "running")}}
+				<img id="power-btn" class="clickable" alt="shutdown instance" role="button" tabindex=0 src="images/actions/instance/stop.svg#symb">
+				<img id="configure-btn" alt="" aria-disabled="true" role="none" src="images/actions/instance/config-inactive.svg#symb">
+				<img id="backup-btn" alt="" aria-disabled="true" role="none" src="images/actions/instance/backup-inactive.svg#symb">
+				<a href="{{.ConsolePath}}" target="_blank">
+					<img id="console-btn" class="clickable" alt="open console" src="images/actions/instance/console-active.svg#symb">
+				</a>
+				<img id="delete-btn" alt="" aria-disabled="true" role="none" src="images/actions/instance/delete-inactive.svg#symb">
+			{{else if and (eq .NodeStatus "online") (eq .Status "stopped")}}
+				<img id="power-btn" class="clickable" alt="start instance" role="button" tabindex=0 src="images/actions/instance/start.svg#symb">
+				<a href="{{.ConfigPath}}">
+					<img id="configure-btn" class="clickable" alt="change configuration" src="images/actions/instance/config-active.svg#symb">
+				</a>
+				<a href="{{.BackupsPath}}">
+					<img id="backup-btn" class="clickable" alt="manage backups" src="images/actions/instance/backup-active.svg#symb">
+				</a>
+				<img id="console-btn" alt="" aria-disabled="true" role="none" src="images/actions/instance/console-inactive.svg#symb">
+				<img id="delete-btn" class="clickable" alt="delete instance" role="button" tabindex=0 src="images/actions/instance/delete-active.svg#symb">
+			{{else if and (eq .NodeStatus "online") (eq .Status "loading")}}
+				<img id="power-btn" alt="" aria-disabled="true" role="none" src="images/actions/instance/loading.svg#symb">
+				<img id="configure-btn" alt="" aria-disabled="true" role="none" src="images/actions/instance/config-inactive.svg#symb">
+				<img id="backup-btn" alt="" aria-disabled="true" role="none" src="images/actions/instance/backup-inactive.svg#symb">
+				<img id="console-btn" alt="" aria-disabled="true" role="none" src="images/actions/instance/console-inactive.svg#symb">
+				<img id="delete-btn" alt="" aria-disabled="true" role="none" src="images/actions/instance/delete-inactive.svg#symb">
+			{{else}}
+			{{end}}
 		</div>
 		<template id="power-dialog">
 			<link rel="stylesheet" href="modules/w3.css">
--- a/web/templates/resource-chart.go.tmpl
+++ b/web/templates/resource-chart.go.tmpl
@@ -2,13 +2,8 @@
 <resource-chart>
 	<template shadowrootmode="open">
 		<link rel="stylesheet" href="modules/w3.css">
-		<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
 		<link rel="stylesheet" href="css/style.css">
 		<style>
-			* {
-				box-sizing: border-box;
-				font-family: monospace;
-			}
 			#container{
 				margin: 0;
 				width: 100%;
Author	SHA1	Message	Date
Arthur Lu	72b1179fc9	update paas fabric submodule	2025-12-09 00:51:34 +00:00
Arthur Lu	32c23daf9d	update go mod	2025-12-09 00:50:45 +00:00
Arthur Lu	b86be4c749	add a bunch of comments to important code	2025-11-18 19:36:05 +00:00
Arthur Lu	338ea3342e	remove external Sortable js dependency	2025-11-07 22:56:10 +00:00
Arthur Lu	3b7d3ba01f	fix regression in draggable boot order list drag image, update Sortable.js, fix mising icons in boot order list	2025-11-07 21:03:34 +00:00
Arthur Lu	9e1fca8597	fix missing img alt in templates	2025-10-30 05:30:05 +00:00
Arthur Lu	c8ca49b85c	cleanup css	2025-10-28 21:33:55 +00:00
Arthur Lu	2877f7709a	fix issues with icon coloring in chrome by switching to img tags	2025-10-28 18:34:42 +00:00
Arthur Lu	7db0bea35c	temporary fix for error dialog	2025-10-16 23:16:14 +00:00
Arthur Lu	ff98eb318e	fix linting	2025-10-14 04:50:04 +00:00
Arthur Lu	05ced39598	fix exact match bug,	2025-10-13 20:56:05 +00:00
Arthur Lu	4e2b6278d8	fix chrome flicker for smaller screen sizes	2025-10-10 22:14:57 +00:00
Arthur Lu	75e098b7b4	fix wrong css class definition in instance card to fix chrome flicker issue	2025-10-10 22:12:37 +00:00
Arthur Lu	8c378a3b49	update go mod	2025-10-10 21:53:35 +00:00
Arthur Lu	3d5989a946	fix flickering issue with instance-card refresh and instance search	2025-10-10 21:41:10 +00:00
Arthur Lu	06afdcec37	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	2025-10-10 06:35:28 +00:00
Arthur Lu	2f21b23535	fix instance card action area slightly too small in medium layouts	2025-10-03 03:58:08 +00:00
Arthur Lu	e8dd28b519	update index with wfa update	2025-10-02 22:04:12 +00:00
Arthur Lu	e0c7a53d85	update wfa, minor style fix	2025-10-02 22:03:23 +00:00
Arthur Lu	118b7dac53	minor style fix	2025-10-02 17:52:08 +00:00
Arthur Lu	db32f318b9	update go mod	2025-10-02 17:45:40 +00:00
Arthur Lu	c13a4c8539	update wfa	2025-09-30 17:50:36 +00:00
Arthur Lu	8d490cd336	remove remaining external css links	2025-09-29 22:05:08 +00:00
Arthur Lu	343c149330	update w3 css, remove external css link to speedup render times	2025-09-29 21:59:26 +00:00
Arthur Lu	d95a82f248	move flag parsing to main, add debug mime types	2025-09-25 00:27:24 +00:00
Arthur Lu	fc42de2c49	fix bugs with boot order interface	2025-09-25 00:27:00 +00:00
				`@@ -0,0 +1 @@`
				`<svg id="symb" role="img" aria-label="cpu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>`