From 0948772ce3b0889ff30f95507450492b5ed7cd2b Mon Sep 17 00:00:00 2001
From: Fred Boniface <fred@fjla.uk>
Date: Fri, 24 Jan 2025 16:18:34 +0000
Subject: [PATCH] Adjust app-card breakpoints

---
 src/lib/app-cards/AppCardArray.svelte  | 16 ++++++++--------
 src/lib/app-cards/MasterAppCard.svelte | 10 ++++++++--
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/lib/app-cards/AppCardArray.svelte b/src/lib/app-cards/AppCardArray.svelte
index 151d6ea..95c4dee 100644
--- a/src/lib/app-cards/AppCardArray.svelte
+++ b/src/lib/app-cards/AppCardArray.svelte
@@ -3,19 +3,19 @@
 </script>
 
 <div id="card-container">
-    <MasterAppCard appName={"My Account"} appDesc={"Manage your password and passkeys"} iconName={"myaccount"} sso={true} appUrl={"https://sso.fjla.uk/realms/FJLA.net/account"} />
-    <MasterAppCard appName={"Nextcloud"} appDesc={"Files, Email, Calendar, Chat"} iconName={"nextcloud"} sso={false} appUrl={"https://cloud.fjla.uk"} bgColor={"#0082c9"} />
-    <MasterAppCard appName={"Portainer"} appDesc={"Manage containerised workloads in Docker"} iconName={"portainer"} sso={true} appUrl={"https://swarm_nodes.fjla.net:9443"} nointernet={true} bgColor={"#3BBCED"} />
-    <MasterAppCard appName={"SpeedyF"} appDesc={"Online Compressor for PDF Files"} iconName={"speedyf"} sso={false} appUrl={"https://speedyf.fjla.uk"} bgColor={"#00001a"} />
-    <MasterAppCard appName={"Jellyfin"} appDesc={"Stream films and TV, watch Live TV"} iconName={"jellyfin"} sso={false} appUrl={"http://jf.fjla.net:8096"} nointernet={true} bgColor={"#AA5CC3"} />
-    <MasterAppCard appName={"Proxmox"} appDesc={"Manage virtual machines"} iconName={"proxmoxve"} sso={true} appUrl={"https://pve0124.fjla.net:8006"} nointernet={true} bgColor={"#e57000"} />
-    <MasterAppCard appName={"Home Assistant"} appDesc={"Smart Home Management"} iconName={"homeassistant"} sso={false} appUrl={"https://ha.fjla.uk"} bgColor={"#18BCF2"} />
+    <MasterAppCard appName={"My Account"} appDesc={"Manage your account"} iconName={"myaccount"} sso={true} appUrl={"https://sso.fjla.uk/realms/FJLA.net/account"} />
+    <MasterAppCard appName={"Nextcloud"} appDesc={"Files, Email, Calendar"} iconName={"nextcloud"} sso={false} appUrl={"https://cloud.fjla.uk"} bgColor={"#0082c9"} />
+    <MasterAppCard appName={"Portainer"} appDesc={"Manage containeris"} iconName={"portainer"} sso={true} appUrl={"https://swarm_nodes.fjla.net:9443"} nointernet={true} bgColor={"#3BBCED"} />
+    <MasterAppCard appName={"SpeedyF"} appDesc={"Minify PDF Files"} iconName={"speedyf"} sso={false} appUrl={"https://speedyf.fjla.uk"} bgColor={"#00001a"} />
+    <MasterAppCard appName={"Jellyfin"} appDesc={"Films, TV & Music"} iconName={"jellyfin"} sso={false} appUrl={"http://jf.fjla.net:8096"} nointernet={true} bgColor={"#AA5CC3"} />
+    <MasterAppCard appName={"Proxmox"} appDesc={"Virtual machines"} iconName={"proxmoxve"} sso={true} appUrl={"https://pve0124.fjla.net:8006"} nointernet={true} bgColor={"#e57000"} />
+    <MasterAppCard appName={"Home Assistant"} appDesc={"Smart Home"} iconName={"homeassistant"} sso={false} appUrl={"https://ha.fjla.uk"} bgColor={"#18BCF2"} />
     <MasterAppCard appName={"Gitea"} appDesc={"Code & Package Repo"} iconName={"gitea"} sso={true} appUrl={"https://git.fjla.uk"} bgColor={"#609926"} />
 </div>
 
 <style>
     #card-container {
-        width: 90%;
+        width: 100%;
         margin: 0 auto;
         display: flex;
         flex-wrap: wrap;
diff --git a/src/lib/app-cards/MasterAppCard.svelte b/src/lib/app-cards/MasterAppCard.svelte
index b0744d0..33baf5b 100644
--- a/src/lib/app-cards/MasterAppCard.svelte
+++ b/src/lib/app-cards/MasterAppCard.svelte
@@ -46,13 +46,19 @@
     }
 
     /* Responsive styles for smaller screens */
-@media (max-width: 875px) {
+@media (max-width: 776px) {
+  #app-card {
+    width: calc(33.333% - 2px);
+  }
+}
+
+    @media (max-width: 582px) {
   #app-card {
     width: calc(50% - 2px); /* 2 cards per row on smaller screens */
   }
 }
 
-@media (max-width: 676px) {
+@media (max-width: 388px) {
   #app-card {
     width: calc(100% - 2px); /* 1 card per row on very small screens */
   }