From 285c12e6826eee77ffbc3ff9482b1f11cb24a78e Mon Sep 17 00:00:00 2001
From: Norbert Maciaszek <norbert@ambiscale.com>
Date: Mon, 11 Aug 2025 23:32:42 +0200
Subject: [PATCH] Enhance global styles and components: add new breakpoint in
 globals.css, update SearchInput for improved styling and responsiveness, and
 modify Navbar for sticky positioning and better layout.

---
 src/app/globals.css                        | 6 +++++-
 src/components/atoms/SearchInput/index.tsx | 4 ++--
 src/components/organisms/Navbar/index.tsx  | 2 +-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 6121b2b..051d4bc 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -64,8 +64,12 @@
   --color-hippie-blue-800: #2c4a60;
   --color-hippie-blue-900: #283f52;
   --color-hippie-blue-950: #1b2936;
+
+  --breakpoint-xs: 420px;
 }
 
+@custom-variant hover-any (&:hover);
+
 @layer base {
   body {
     @apply bg-pink-lady-50 text-text;
@@ -102,5 +106,5 @@
 }
 
 @utility grid-auto-cols-* {
-  grid-template-columns: repeat(auto-fill, --value(integer));
+  grid-template-columns: repeat(--value(integer), 1fr);
 }
diff --git a/src/components/atoms/SearchInput/index.tsx b/src/components/atoms/SearchInput/index.tsx
index b47ac49..20903d7 100644
--- a/src/components/atoms/SearchInput/index.tsx
+++ b/src/components/atoms/SearchInput/index.tsx
@@ -33,8 +33,8 @@ export const SearchInput: FC<Props> = ({
     <div className={`relative text-gray-600 inline-block ${className}`}>
       <input
         type="search"
-        name="serch"
-        className="bg-white h-10 px-5 pr-10 rounded-full text-sm focus:outline-none w-48 focus:w-[400px] transition-all"
+        name="search"
+        className="bg-white h-10 px-5 pr-10 rounded-full text-md md:text-sm focus:outline-none w-52 focus:w-[400px] transition-all max-w-[90vw]"
         value={value}
         placeholder={placeholder}
         onChange={(e) => setValue(e.target.value)}
diff --git a/src/components/organisms/Navbar/index.tsx b/src/components/organisms/Navbar/index.tsx
index ad79de0..0d6ef44 100644
--- a/src/components/organisms/Navbar/index.tsx
+++ b/src/components/organisms/Navbar/index.tsx
@@ -14,7 +14,7 @@ const links = [
 
 export const Navbar = () => {
   return (
-    <header className="bg-white shadow-sm">
+    <header className="bg-white shadow-sm max-sm:sticky top-0 w-full z-30">
       <div className="container">
         <div className="flex items-center gap-8 py-4">
           <Link className="block text-teal-600" href="/">