From be92742e96c0880fa03035c6acaf9791f6791e86 Mon Sep 17 00:00:00 2001
From: Henri <henrikarba@gmail.com>
Date: Fri, 1 May 2026 00:25:56 +0300
Subject: [PATCH] smaller laptop screen fixes

---
 src/app.css                |  7 +++++++
 src/routes/Helpdesk.svelte | 37 ++++++++++++++++++-------------------
 src/routes/Student.svelte  |  2 +-
 3 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/src/app.css b/src/app.css
index 32329cb..afd8230 100644
--- a/src/app.css
+++ b/src/app.css
@@ -135,6 +135,13 @@ input[type="submit"] {
   }
 }
 
+/* Scale down UI for smaller screens */
+@media (max-width: 1280px) {
+  :root {
+    --ui-scale: 0.8;
+  }
+}
+
 /* Accessibility settings */
 @media (prefers-reduced-motion: reduce) {
   * {
diff --git a/src/routes/Helpdesk.svelte b/src/routes/Helpdesk.svelte
index f0d9e0f..0574863 100644
--- a/src/routes/Helpdesk.svelte
+++ b/src/routes/Helpdesk.svelte
@@ -56,24 +56,25 @@
 
 <div class="safe-area-navbar">
 <!-- Hero Section -->
-<div class="w-full bg-black">
-  <div class="flex absolute justify-center items-center flex-row w-full h-[42vh] px-4">
-    <img src={helpdesk} alt={$text["hero"]?.title || "Helpdesk logo"} class="z-10" />
+<Section class="relative bg-gray-900 min-h-[42vh] overflow-hidden" padding="none" fullWidth={true}>
+  <div class="absolute inset-0 left-1/2 w-screen -translate-x-1/2 h-[42vh]" aria-hidden="true">
+    <picture>
+      <source srcset={helpdeskbgWebpSet} type="image/webp" />
+      <img
+        class="h-full w-full object-cover object-left opacity-50 blur-[1.5px]"
+        src={helpdeskbg}
+        alt="Helpdesk"
+      />
+    </picture>
   </div>
-  <picture>
-    <source srcset={helpdeskbgWebpSet} type="image/webp" />
-    <img
-      class="h-[42vh] object-cover object-left w-full opacity-50 blur-[1.5px]"
-      src={helpdeskbg}
-      alt="Helpdesk"
-    />
-  </picture>
-</div>
+  <div class="relative flex justify-center items-center flex-row w-full h-[42vh] z-10">
+    <img src={helpdesk} alt={$text["hero"]?.title || "Helpdesk logo"} />
+  </div>
+</Section>
 
 <!-- Main Content -->
 <Section>
   <Grid columns={2} tabletColumns={1} mobileColumns={1} gap="gap-6">
-      <!-- What is HELPDESK? -->
       <div class="flex flex-col">
         <h2 class="text-4xl font-light pb-4">{$text["whatIs"]?.title || ""}</h2>
         <p class="text-lg">
@@ -81,7 +82,6 @@
         </p>
       </div>
 
-      <!-- What services do we offer? -->
       <div class="flex flex-col">
         <h2 class="text-4xl font-light pb-4">{$text["services"]?.title || ""}</h2>
         <ul class="text-lg list-disc pl-5">
@@ -127,7 +127,6 @@
         </p>
       </div>
 
-      <!-- Opening Hours & Location -->
       <div class="flex flex-col">
         <h2 class="text-4xl font-light pb-4">
           {@html $text["hours"]?.title || ""}
@@ -158,8 +157,8 @@
                 class="flex flex-col items-center hover:scale-110 transition-transform cursor-pointer"
                 title="Get directions to Akadeemia tee 5"
               >
-                <span class="text-xs font-semibold text-white bg-[#E69635] px-2 py-0.5 rounded shadow-md mb-1 whitespace-nowrap">Akadeemia tee 5</span>
-                <MapPin class="w-7 h-7 text-[#E69635] drop-shadow-lg" />
+                <span class="text-xs font-semibold text-white bg-orange-500 px-2 py-0.5 rounded shadow-md mb-1 whitespace-nowrap">Akadeemia tee 5</span>
+                <MapPin class="w-7 h-7 text-orange-500 drop-shadow-lg" />
               </div>
             </Marker>
             
@@ -174,7 +173,7 @@
                 title="Get directions to Keemia bus stop"
               >
                 <span class="text-xs font-semibold text-gray-900 bg-white px-2 py-0.5 rounded shadow-md mb-1">Keemia</span>
-                <BusFront class="w-7 h-7 text-[#E69635] drop-shadow-lg" />
+                <BusFront class="w-7 h-7 text-orange-500 drop-shadow-lg" />
               </div>
             </Marker>
             
@@ -189,7 +188,7 @@
                 title="Get directions to Tehnikaülikool bus stop"
               >
                 <span class="text-xs font-semibold text-gray-900 bg-white px-2 py-0.5 rounded shadow-md mb-1">Tehnikaülikool</span>
-                <BusFront class="w-7 h-7 text-[#E69635] drop-shadow-lg" />
+                <BusFront class="w-7 h-7 text-orange-500 drop-shadow-lg" />
               </div>
             </Marker>
           </MapLibre>
diff --git a/src/routes/Student.svelte b/src/routes/Student.svelte
index a4a5d3b..5356409 100644
--- a/src/routes/Student.svelte
+++ b/src/routes/Student.svelte
@@ -52,7 +52,7 @@
 
 <div class="safe-area-navbar">
   <Section class="overflow-hidden bg-gray-900" padding="none" fullWidth={true} contentClass="relative !px-0">
-    <div class="relative overflow-hidden py-[clamp(3rem,8vw,6rem)]">
+    <div class="relative overflow-hidden py-[3rem]">
       <div class="relative z-10 mx-auto w-full max-w-(--page-max-width) px-(--page-padding-inline)">
         <div class="relative z-10 w-full max-w-3xl">
           <h1 class="mb-6 text-[clamp(2.5rem,7vw,4.75rem)] leading-[1.03] font-medium text-white">