From 9ec6c4f94417611000f6e82a2bd7b7e5c868ff65 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Sat, 15 Mar 2025 12:01:55 -0600
Subject: [PATCH] chore(ui): adjust padding and logo size in Navigation and
 Search components

---
 app/src/components/Navigation.tsx | 6 +++---
 app/src/components/Search.tsx     | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/src/components/Navigation.tsx b/app/src/components/Navigation.tsx
index c1f041c..7222374 100644
--- a/app/src/components/Navigation.tsx
+++ b/app/src/components/Navigation.tsx
@@ -23,10 +23,10 @@ const Navigation = () => {
   }, [setGithubStars]);
 
   return (
-    <div className="flex sticky top-0 bg-background/80 backdrop-blur-xs z-10 justify-between items-center p-4 border-b">
+    <div className="flex sticky top-0 bg-background/80 backdrop-blur-xs z-10 justify-between items-center p-2 py-4 lg:p-4 border-b">
       <div className="flex flex-row gap-2 justify-center items-center">
-        <DokployLogo className="w-10 h-10 text-black dark:text-white" />
-        <h1 className="text-2xl font-bold">Dokploy Templates</h1>
+        <DokployLogo className="size-7 lg:size-10 text-black dark:text-white" />
+        <h1 className="text-2xl font-bold hidden lg:block">Dokploy Templates</h1>
       </div>
       <div className="flex flex-row gap-2 justify-center items-center">
         <Button
diff --git a/app/src/components/Search.tsx b/app/src/components/Search.tsx
index 6aa19eb..f95a7ea 100644
--- a/app/src/components/Search.tsx
+++ b/app/src/components/Search.tsx
@@ -44,7 +44,7 @@ const Search = () => {
   }, [uniqueTags, tagSearch]);
 
   return (
-    <div className=" mx-auto p-12  border-b w-full">
+    <div className=" mx-auto p-4 lg:p-12  border-b w-full">
       {/* <h1 className="text-2xl md:text-3xl xl:text-4xl font-bold text-center mb-8">
         Available Templates ({templates?.length || 0})
       </h1> */}
@@ -71,7 +71,7 @@ const Search = () => {
               <XIcon className="absolute end-3 translate-y-3.5 top-1/2 h-5 w-5 text-gray-400" />
             </div>
           ) : (
-            <SearchIcon className="absolute end-3 translate-y-3.5 top-1/2 h-5 w-5 text-gray-400" />
+            <SearchIcon className="absolute end-3 translate-y-2 top-1/2 lg:size-5 size-4 text-gray-400" />
           )}
         </div>