From 2200dfb8e9c6a4884bc754a143404ac12507cb6a Mon Sep 17 00:00:00 2001
From: Amalie <amalisso@stud.ntnu.no>
Date: Fri, 16 Oct 2026 15:35:26 +0200
Subject: [PATCH] =?UTF-8?q?Har=20endret=20st=C3=B8rrelse=20p=C3=A5=20slide?=
 =?UTF-8?q?show=20(#122)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/slideshow/RecipeSlideshow.tsx | 6 +++---
 client/src/routes/HomePage.tsx                      | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/components/slideshow/RecipeSlideshow.tsx b/client/src/components/slideshow/RecipeSlideshow.tsx
index f22a70d..0a0473e 100644
--- a/client/src/components/slideshow/RecipeSlideshow.tsx
+++ b/client/src/components/slideshow/RecipeSlideshow.tsx
@@ -52,7 +52,7 @@ export function RecipeSlideshow({ recipes }: RecipeSlideshowProps) {
     }, [emblaApi]);
 
     return (
-        <section aria-label="Utvalgte oppskrifter" className="relative md:px-16">
+        <section aria-label="Utvalgte oppskrifter" className="relative md:px-2">
             {/* Vinduet: det skjuler slidene som ikke vises */}
             <div className="overflow-hidden" ref={emblaRef}>
                 {/* Raden med alle slidene som Embla flytter sidelengs */}
@@ -104,7 +104,7 @@ export function RecipeSlideshow({ recipes }: RecipeSlideshowProps) {
                 type="button"
                 aria-label="Forrige oppskrift"
                 onClick={() => emblaApi?.scrollPrev()}
-                className="absolute left-0 top-1/2 -translate-y-1/2 hidden md:flex h-12 w-12 items-center justify-center rounded-full bg-background/80 hover:bg-background focus-visible:outline-2 focus-visible:outline-primary"
+                className="absolute -left-12 top-1/2 -translate-y-1/2 hidden md:flex h-12 w-12 items-center justify-center rounded-full bg-background/80 hover:bg-background focus-visible:outline-2 focus-visible:outline-primary"
             >
                <ArrowBackIcon/>
             </button>
@@ -112,7 +112,7 @@ export function RecipeSlideshow({ recipes }: RecipeSlideshowProps) {
                 type="button"
                 aria-label="Neste oppskrift"
                 onClick={() => emblaApi?.scrollNext()}
-                className="absolute right-0 top-1/2 -translate-y-1/2 hidden md:flex h-12 w-12 items-center justify-center rounded-full bg-background/80 hover:bg-background focus-visible:outline-2 focus-visible:outline-primary"
+                className="absolute -right-12 top-1/2 -translate-y-1/2 hidden md:flex h-12 w-12 items-center justify-center rounded-full bg-background/80 hover:bg-background focus-visible:outline-2 focus-visible:outline-primary"
             >
                 <ArrowForwardIcon/>
             </button>
diff --git a/client/src/routes/HomePage.tsx b/client/src/routes/HomePage.tsx
index 88c48cb..ca671ee 100644
--- a/client/src/routes/HomePage.tsx
+++ b/client/src/routes/HomePage.tsx
@@ -18,7 +18,7 @@ export default function HomePage() {
   return (
     <main className="bg-background min-h-screen">
 
-      <div className="mx-auto px-6 py-10">
+      <div className="mx-auto px-6 pt-0 md:pt-2">
 
         {/* Viser en melding mens oppskriftene lastes eller hvis noe går galt. */}
         {loading && <p role="status">Laster oppskrifter ...</p>}