From 08c3433fe74a8f16a87639be6f3db8c1541e3659 Mon Sep 17 00:00:00 2001
From: Martin Alexander Kaminski <martakam@stud.ntnu.no>
Date: Wed, 4 Nov 2026 23:00:49 +0100
Subject: [PATCH 1/2] style: use built-in Tailwind css breakpoints

---
 frontend/app/components/Footer/Footer.tsx            | 2 +-
 frontend/app/components/home/SearchBar/SearchBar.tsx | 4 ++--
 frontend/app/routes/book/selectedBook.tsx            | 4 ++--
 frontend/app/routes/home.tsx                         | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/app/components/Footer/Footer.tsx b/frontend/app/components/Footer/Footer.tsx
index 576b1e76..e9676f0c 100644
--- a/frontend/app/components/Footer/Footer.tsx
+++ b/frontend/app/components/Footer/Footer.tsx
@@ -1,6 +1,6 @@
 function Footer() {
   return (
-    <footer className="flex items-center justify-between bg-zinc-800 text-white px-10 py-16 text-sm max-[800px]:flex-col max-[800px]:justify-center max-[800px]:gap-1">
+    <footer className="flex flex-col items-center justify-center gap-1 bg-zinc-800 text-white px-10 py-16 text-sm md:flex-row md:justify-between md:gap-0">
       <p>IT2810 Webutvikling - Gruppe 37 - Prosjekt 2</p>
       <p>2026</p>
     </footer>
diff --git a/frontend/app/components/home/SearchBar/SearchBar.tsx b/frontend/app/components/home/SearchBar/SearchBar.tsx
index 75e9cf3e..f53fac5b 100644
--- a/frontend/app/components/home/SearchBar/SearchBar.tsx
+++ b/frontend/app/components/home/SearchBar/SearchBar.tsx
@@ -66,7 +66,7 @@ function SearchBar({ resultCount }: SearchBarProps) {
   const filtersDescription = `${filtersCount} ${filtersCount === 1 ? "filter" : "filters"} active`;
 
   return (
-    <section className="flex items-center justify-center gap-4 mx-auto mt-20 w-full max-[1000px]:mx-10 max-[600px]:mt-10 max-[1000px]:w-[calc(100%-80px)]">
+    <section className="flex items-center justify-center gap-4 mx-auto mt-10 w-full px-10 sm:mt-20">
       <InputGroup className="h-10 max-w-150 bg-card">
         <InputGroupAddon align="inline-start">
           <SearchIcon />
@@ -85,7 +85,7 @@ function SearchBar({ resultCount }: SearchBarProps) {
         />
 
         {resultCount !== undefined && (
-          <InputGroupAddon align="inline-end" className="max-[400px]:hidden">
+          <InputGroupAddon align="inline-end" className="max-sm:hidden">
             <InputGroupText aria-live="polite">
               {resultCount} {resultCount === 1 ? "result" : "results"}
             </InputGroupText>
diff --git a/frontend/app/routes/book/selectedBook.tsx b/frontend/app/routes/book/selectedBook.tsx
index 63583d59..d3f6364d 100644
--- a/frontend/app/routes/book/selectedBook.tsx
+++ b/frontend/app/routes/book/selectedBook.tsx
@@ -137,8 +137,8 @@ export default function SelectedBookPage({ params }: Route.ComponentProps) {
           Go back
         </Button>
 
-        <section className="grid grid-cols-1 gap-2 min-[901px]:grid-cols-[2fr_3fr]">
-          <Card className="relative min-h-96 h-full items-center justify-center p-7.5 min-[901px]:sticky min-[901px]:top-4 min-[901px]:self-start max-[1000px]:min-[901px]:p-3.75 [&>figure]:w-76 [&>figure]:max-w-full [&>p]:w-80 [&>p]:max-w-full">
+        <section className="grid grid-cols-1 gap-2 lg:grid-cols-[2fr_3fr]">
+          <Card className="relative min-h-96 h-full items-center justify-center p-7.5 lg:sticky lg:top-4 lg:self-start [&>figure]:w-76 [&>figure]:max-w-full [&>p]:w-80 [&>p]:max-w-full">
             <FavoriteButton book={book} />
             <BookCover book={book} />
             <BookRating rating={book.rating} numRatings={book.numRatings} />
diff --git a/frontend/app/routes/home.tsx b/frontend/app/routes/home.tsx
index 1f7b29f4..3a01119c 100644
--- a/frontend/app/routes/home.tsx
+++ b/frontend/app/routes/home.tsx
@@ -71,7 +71,7 @@ export default function HomePage() {
       <SearchBar resultCount={totalCount} />
 
       <SortSelect />
-      <ul className="grid grid-cols-4 justify-center gap-4 mx-auto px-10 pb-10 pt-4 max-w-300 max-[1200px]:grid-cols-3 max-[1000px]:grid-cols-2 max-[600px]:grid-cols-1">
+      <ul className="grid grid-cols-1 justify-center gap-4 mx-auto px-10 pb-10 pt-4 max-w-300 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
         {books.map((book) => (
           <li key={book.id}>
             <BookCard book={book} />

From 10cb2931268acad23fd0da02f8fa939aae8e2ff6 Mon Sep 17 00:00:00 2001
From: Martin Alexander Kaminski <martakam@stud.ntnu.no>
Date: Sat, 7 Nov 2026 15:29:34 +0100
Subject: [PATCH 2/2] fix: center footer text on small devices

---
 frontend/app/components/Footer/Footer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/app/components/Footer/Footer.tsx b/frontend/app/components/Footer/Footer.tsx
index 9c1d4fff..4170a3ba 100644
--- a/frontend/app/components/Footer/Footer.tsx
+++ b/frontend/app/components/Footer/Footer.tsx
@@ -4,7 +4,7 @@ import { buttonVariants } from "~/components/ui/Button";
 function Footer() {
   return (
     <footer className="border-t-2 border-zinc-800 bg-background text-sm text-muted-foreground">
-      <div className="mx-auto flex flex-col max-w-300 flex-wrap items-center gap-x-6 gap-y-8 px-10 py-12 md:flex-row md:justify-between">
+      <div className="mx-auto flex flex-col text-center max-w-300 flex-wrap items-center gap-x-6 gap-y-8 px-10 py-12 md:flex-row md:justify-between md:text-left">
         <p className="flex flex-col gap-1">
           <Link to="/" className="text-2xl text-foreground">
             Readr