Merge pull request #36 from azvyae/layouts/fix-footer-responsivity

Fix responsivity
azvyae · Oct 10, 2024 · b090361 · b090361
2 parents e683405 + 7a517ef
commit b090361
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/src/app/stories/components.tsx b/src/app/stories/components.tsx
@@ -255,7 +255,11 @@ function FilteringHandler({
         data-item="search-button"
         onClick={() => {
           setShowSearch((cur) => {
-            input.current?.focus();
+            if (!cur) {
+              input.current?.focus();
+            } else {
+              input.current?.blur();
+            }
             if (cur && !input.current?.value && search) {
               router.push('/stories');
               router.refresh();

diff --git a/src/components/footer/autobacklink.tsx b/src/components/footer/autobacklink.tsx
@@ -27,9 +27,9 @@ function AutoBacklinks() {
       .map((_, i) => (
         <div
           key={i}
-          className={`w-fit flex gap-2 whitespace-nowrap items-center font-medium transition-colors rounded text-[#5a685d] dark:text-light py-1 relative`}
+          className={`w-fit flex gap-1 whitespace-nowrap items-center font-medium transition-colors rounded text-[#5a685d] dark:text-light py-1 relative`}
         >
-          <div className="flex relative items-center h-full gap-2">
+          <div className="flex relative items-center h-full gap-1">
             <span
               style={{
                 width: 64 + (i % 2 === 0 ? i : i * 16),
@@ -49,10 +49,10 @@ function AutoBacklinks() {
       href={item.url}
       target="_blank"
       rel="noopener noreferrer"
-      className={`w-fit flex gap-2 whitespace-nowrap font-medium transition-colors rounded group text-[#5a685d] dark:text-light py-1 relative`}
+      className={`w-fit flex gap-1 whitespace-nowrap font-medium transition-colors rounded group text-[#5a685d] dark:text-light py-1 relative`}
       title={`Visit ${item.label}`}
     >
-      <div className="flex relative items-center gap-2">
+      <div className="flex relative items-center gap-1">
         {item.label}
         <span className="border-b-2 group-hover:w-full w-0 transition-[width] absolute bottom-0"></span>
       </div>

diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx
@@ -21,7 +21,9 @@ function Footer() {
           className="justify-center flex-col items-start text-base flex"
         >
           <h6 className="font-extrabold text-lg mb-2">Links</h6>
-          <MainLinks />
+          <div className="grid gap-1">
+            <MainLinks />
+          </div>
         </div>
         <div
           data-item="social-links"
@@ -37,7 +39,7 @@ function Footer() {
           <h6 className="font-extrabold text-lg mb-2 flex gap-2 items-center">
             Check Also <HiExternalLink />
           </h6>
-          <div className="flex-wrap gap-2 items-start text-base flex">
+          <div className="flex-wrap gap-1 items-start text-base flex">
             <AutoBacklinks />
           </div>
         </div>