From 099eac4500ab421cf3ad8159ad144dff632627c2 Mon Sep 17 00:00:00 2001
From: Erol <erol.haagenrud@envide.no>
Date: Sun, 12 Apr 2026 14:19:57 +0200
Subject: [PATCH] Etter flere gui-endringer

---
 frontend/src/app/FacilitySearch.tsx           | 42 +++++++------------
 .../app/golfbaner/[slug]/CourseDisplay.tsx    |  8 ++--
 2 files changed, 19 insertions(+), 31 deletions(-)

diff --git a/frontend/src/app/FacilitySearch.tsx b/frontend/src/app/FacilitySearch.tsx
index 3033e5c..eff79cc 100755
--- a/frontend/src/app/FacilitySearch.tsx
+++ b/frontend/src/app/FacilitySearch.tsx
@@ -256,10 +256,7 @@ const noteClampStyle: CSSProperties = {
 };
 
 const actionIconClassName =
-  "flex h-12 w-12 items-center justify-center rounded-[1.1rem] bg-white text-[#112015] shadow-sm transition hover:bg-[#FF5722] hover:text-white";
-
-const cardActionShellClassName =
-  "flex flex-wrap gap-2 rounded-[1.35rem] bg-[#25312A] p-2 text-[#112015]";
+  "flex h-10 w-10 items-center justify-center rounded-[0.95rem] border border-[#D5DDD1] bg-white text-[#112015] transition hover:border-[#FF5722] hover:text-[#FF5722]";
 
 export default function FacilitySearch({
   initialFacilities,
@@ -621,11 +618,19 @@ export default function FacilitySearch({
                   <span className="rounded-full bg-[#F4F5F1] px-3 py-1.5 text-[10px] font-extrabold uppercase tracking-[0.15em] text-[#617063]">
                     {facility.banetype || "Banetype ukjent"}
                   </span>
-                  {facility.hasVtg && (
-                    <span className="rounded-full bg-[#FFF0E9] px-3 py-1.5 text-[10px] font-extrabold uppercase tracking-[0.15em] text-[#C94F2D]">
-                      VTG
-                    </span>
-                  )}
+                </div>
+
+                <div className="flex flex-wrap gap-2">
+                  <span className="rounded-full bg-[#F7F8F3] px-3 py-1.5 text-[10px] font-extrabold uppercase tracking-[0.15em] text-[#617063]">
+                    Oppdatert {formatUpdatedDate(facility.status_updated_at)}
+                  </span>
+                  <span className="rounded-full bg-[#F7F8F3] px-3 py-1.5 text-[10px] font-extrabold uppercase tracking-[0.15em] text-[#617063]">
+                    {sortMethod === "dist" && Number.isFinite(facility.distance)
+                      ? `${Math.round(facility.distance)} km unna`
+                      : sortMethod === "updated"
+                        ? "Nyeste status"
+                        : "Alfabetisk"}
+                  </span>
                 </div>
 
                 {facility.footnote && (
@@ -639,24 +644,7 @@ export default function FacilitySearch({
                   </div>
                 )}
 
-                <div className="grid grid-cols-2 gap-3 rounded-[1.35rem] bg-[#F7F8F3] p-4">
-                  <div>
-                    <p className="text-[10px] font-extrabold uppercase tracking-[0.18em] text-[#839184]">Oppdatert</p>
-                    <p className="mt-1 text-sm font-bold text-[#112015]">{formatUpdatedDate(facility.status_updated_at)}</p>
-                  </div>
-                  <div>
-                    <p className="text-[10px] font-extrabold uppercase tracking-[0.18em] text-[#839184]">Sortering</p>
-                    <p className="mt-1 text-sm font-bold text-[#112015]">
-                      {sortMethod === "dist" && Number.isFinite(facility.distance)
-                        ? `${Math.round(facility.distance)} km unna`
-                        : sortMethod === "updated"
-                          ? "Nyeste status"
-                          : "Alfabetisk"}
-                    </p>
-                  </div>
-                </div>
-
-                <div className={cardActionShellClassName}>
+                <div className="flex flex-wrap justify-center gap-2">
                   {facility.website_url && (
                     <a href={facility.website_url} target="_blank" rel="noreferrer" className={actionIconClassName} aria-label={`Besøk nettsiden til ${facility.name}`}>
                       <ActionIcon type="web" />
diff --git a/frontend/src/app/golfbaner/[slug]/CourseDisplay.tsx b/frontend/src/app/golfbaner/[slug]/CourseDisplay.tsx
index 2eeb26a..d9bc0cf 100644
--- a/frontend/src/app/golfbaner/[slug]/CourseDisplay.tsx
+++ b/frontend/src/app/golfbaner/[slug]/CourseDisplay.tsx
@@ -143,21 +143,21 @@ export default function CourseDisplay({ course }: { course: any }) {
            </p>
          </div>
         
-        <div className="flex items-center gap-6 bg-gray-50 p-6 rounded-[2.5rem] border border-gray-100">
+        <div className="grid w-full max-w-[28rem] grid-cols-2 gap-4 bg-gray-50 p-4 rounded-[2rem] border border-gray-100 md:flex md:w-auto md:max-w-none md:items-center md:gap-6 md:p-6">
             <div className="flex flex-col"><span className="text-[9px] font-black text-[#7ca982] uppercase ml-1">Kjønn</span>
-                <select value={gender} onChange={e => { setGender(e.target.value as any); setSelectedTeeIndex(0); }} className="bg-transparent text-[#11280f] font-black outline-none border-b-2 border-[#7ca982]/30 pb-1 cursor-pointer">
+                <select value={gender} onChange={e => { setGender(e.target.value as any); setSelectedTeeIndex(0); }} className="min-w-0 bg-transparent text-[#11280f] font-black outline-none border-b-2 border-[#7ca982]/30 pb-1 cursor-pointer">
                     <option value="herrer">HERRER</option><option value="damer">DAMER</option>
                  </select>
             </div>
             <div className="flex flex-col"><span className="text-[9px] font-black text-[#7ca982] uppercase ml-1">Utslag</span>
-                <select value={selectedTeeIndex} onChange={e => setSelectedTeeIndex(Number(e.target.value))} className="bg-transparent text-[#11280f] font-black outline-none border-b-2 border-[#7ca982]/30 pb-1 cursor-pointer">
+                <select value={selectedTeeIndex} onChange={e => setSelectedTeeIndex(Number(e.target.value))} className="min-w-0 bg-transparent text-[#11280f] font-black outline-none border-b-2 border-[#7ca982]/30 pb-1 cursor-pointer">
                     {availableTees.map((t: any, i: number) => (<option key={i} value={i}>{t.navn_utslag || t.navn_utslag_damer}</option>))}
                 </select>
             </div>
             <div className="flex flex-col"><span className="text-[9px] font-black text-[#7ca982] uppercase ml-1">Ditt HCP</span>
                 <input type="text" value={hcp} onChange={e => setHcp(e.target.value)} className="w-12 bg-transparent text-[#11280f] font-black text-center border-b-2 border-[#7ca982]/30" />
             </div>
-            <div className="pl-6 border-l border-gray-200 text-center">
+            <div className="col-span-2 flex items-center justify-center gap-3 rounded-[1.4rem] bg-white px-4 py-3 text-center md:col-span-1 md:pl-6 md:border-l md:border-gray-200 md:bg-transparent md:px-0 md:py-0">
                 <p className="text-[9px] uppercase font-black text-[#7ca982] mb-1">SpH</p>
                 <p className="text-4xl font-black text-[#11280f] leading-none">{playingHandicap || 0}</p>
             </div>