Fix width of search results to be adaptive across screen sizes

Author: amrit110

catalog/app/globals.css

@@ -114,9 +114,34 @@ body {
   border-radius: 1.5rem !important;
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
   margin-top: 1rem !important;
+  margin-left: auto !important;
+  margin-right: auto !important;
   max-height: 70vh !important;
   overflow-y: auto !important;
   padding: 1.5rem !important;
+  width: 100% !important;
+  max-width: 100% !important;
+}
+
+@media (min-width: 768px) {
+  #hero-search .pagefind-ui__drawer {
+    width: 48rem !important;
+    max-width: 90vw !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  #hero-search .pagefind-ui__drawer {
+    width: 56rem !important;
+    max-width: 85vw !important;
+  }
+}
+
+@media (min-width: 1280px) {
+  #hero-search .pagefind-ui__drawer {
+    width: 64rem !important;
+    max-width: 80vw !important;
+  }
 }
 
 /* Filters section */
@@ -195,9 +220,9 @@ body {
 #hero-search .pagefind-ui__result {
   border: 1px solid #e5e7eb !important;
   border-radius: 1rem !important;
-  padding: 1.5rem !important;
-  margin-bottom: 1rem !important;
-  transition: all 0.2s !important;
+  padding: 1.75rem !important;
+  margin-bottom: 1.25rem !important;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
   position: relative !important;
   background: white !important;
 }
@@ -234,10 +259,11 @@ body {
 #hero-search .pagefind-ui__result-title {
   color: #111827 !important;
   font-weight: 700 !important;
-  font-size: 1.125rem !important;
-  margin-bottom: 0.75rem !important;
-  line-height: 1.5 !important;
+  font-size: 1.25rem !important;
+  margin-bottom: 1rem !important;
+  line-height: 1.4 !important;
   transition: color 0.2s !important;
+  letter-spacing: -0.01em !important;
 }
 
 #hero-search .pagefind-ui__result:hover .pagefind-ui__result-title {
@@ -248,9 +274,10 @@ body {
 #hero-search .pagefind-ui__result-excerpt {
   color: #6b7280 !important;
   font-size: 0.9375rem !important;
-  line-height: 1.7 !important;
+  line-height: 1.75 !important;
   margin-top: 0.5rem !important;
-  padding-left: 0.25rem !important;
+  padding-left: 0 !important;
+  max-width: 85ch !important;
 }
 
 /* Highlighted search terms */
@@ -272,20 +299,27 @@ body {
 /* Result metadata (tags, etc) */
 #hero-search .pagefind-ui__result-tags {
   display: flex !important;
-  gap: 0.5rem !important;
-  margin-top: 1rem !important;
+  gap: 0.625rem !important;
+  margin-top: 1.25rem !important;
   flex-wrap: wrap !important;
 }
 
 #hero-search .pagefind-ui__result-tag {
-  background: #f9fafb !important;
-  color: #6b7280 !important;
-  padding: 0.375rem 0.875rem !important;
+  background: #f3f4f6 !important;
+  color: #4b5563 !important;
+  padding: 0.4rem 0.95rem !important;
   border-radius: 9999px !important;
-  font-size: 0.75rem !important;
+  font-size: 0.8125rem !important;
   font-weight: 600 !important;
   border: 1px solid #e5e7eb !important;
   text-transform: capitalize !important;
+  transition: all 0.2s !important;
+}
+
+#hero-search .pagefind-ui__result-tag:hover {
+  background: #e5e7eb !important;
+  color: #111827 !important;
+  border-color: #d1d5db !important;
 }
 
 /* Message when no results */