fix: make the searchButton width dynamic to fit the content (#6904)

* fix: make the `searchButton` width dynamic to fit the content

closes ##6903

* fix(search component): adjust `search` component to better adapt to the available space

adjust the `search` component to better adapt to the available space

* fix(navbar): better distribute navigation items according to available space

adjust the main navigation component to better distribute the elements

* fix(navitem): increase the font-size of navigation items

adjust the font-size of navigation items, especially on mobile

Author: nazarepiedady

apps/site/components/Common/Search/index.module.css

@@ -1,6 +1,8 @@
 .searchButton {
   @apply flex
-    w-52
+    grow
+    basis-80
+    items-center
     gap-2
     rounded-md
     bg-neutral-200
@@ -9,6 +11,7 @@
     text-neutral-800
     hover:bg-neutral-300
     hover:text-neutral-900
+    sm:mr-auto
     dark:bg-neutral-900
     dark:text-neutral-600
     dark:hover:bg-neutral-800

apps/site/components/Containers/NavBar/NavItem/index.module.css

@@ -7,9 +7,9 @@
     py-2;
 
   .label {
-    @apply text-sm
+    @apply text-base
       font-medium
-      leading-5;
+      lg:text-sm;
   }
 
   .icon {

apps/site/components/Containers/NavBar/index.module.css

@@ -47,6 +47,8 @@
   @apply hidden
     flex-1
     flex-col
+    justify-between
+    gap-4
     lg:flex
     lg:flex-row
     lg:items-center;
@@ -55,24 +57,30 @@
 .navItems {
   @apply flex
     flex-col
-    gap-1
+    gap-0
     border-b
     border-neutral-200
     p-4
     lg:flex-1
     lg:flex-row
+    lg:gap-1
     lg:border-0
     lg:p-0
     dark:border-neutral-900;
 }
 
 .actionsWrapper {
   @apply flex
+    flex-row
+    flex-wrap
     items-center
+    justify-between
     gap-2
     border-b
     border-neutral-200
     p-4
+    sm:flex-nowrap
+    lg:basis-96
     lg:border-0
     lg:p-0
     dark:border-neutral-900;