responsive UI

tailcallhq · Oct 31, 2024 · 9e610d6 · 9e610d6
1 parent 8d48b79
commit 9e610d6
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 32 deletions.
diff --git a/src/components/blog/TagSelectionModal/TagSelectionModal.tsx b/src/components/blog/TagSelectionModal/TagSelectionModal.tsx
@@ -56,36 +56,44 @@ const TagSelectionModal: React.FC<TagSelectionModalProps> = ({open, onClose}) =>
   return (
     <>
       {open ? (
-        <div
-          className={clsx(
-            "absolute w-4/12 h-full overflow-scroll right-0 bg-white border border-solid border-tailCall-border-light-500 px-10 py-8 flex flex-col gap-8",
-            styles.tagSelectionModalContainer,
-          )}
-        >
-          <div className="flex items-center justify-between">
-            <span className="text-title-large text-black">Explore All Tags</span>
-            <X width={24} height={24} className="cursor-pointer" onClick={handleModalClose} />
-          </div>
-          <div className="flex flex-col gap-5 pb-36">
-            <div className="flex items-center gap-3 border border-solid border-tailCall-border-light-500 rounded-lg py-3 px-6">
-              <Search width={20} height={20} className="text-tailCall-light-500" />
-              <input
-                name="tag"
-                type="text"
-                value={query}
-                onChange={handleQueryChange}
-                placeholder="Search Tags"
-                className="text-black placeholder:text-tailCall-light-500 border-none outline-none text-content-small"
-              />
+        <>
+          {/* Overlay */}
+          <div
+            className={clsx("block lg:hidden fixed inset-0 bg-black bg-opacity-50", styles.modalOverlay)}
+            onClick={handleModalClose}
+          ></div>
+
+          {/* Modal Container */}
+          <div
+            className={clsx(
+              "absolute w-full md:w-4/12 h-full overflow-scroll right-0 bg-white rounded-xl md:rounded-none md:border md:border-solid md:border-tailCall-border-light-500 px-4 py-8 md:px-10 md:py-8 flex flex-col gap-8",
+              styles.modalContainer,
+            )}
+          >
+            <div className="flex items-center justify-between">
+              <span className="text-title-medium md:text-title-large text-black">Explore All Tags</span>
+              <X width={24} height={24} className="cursor-pointer" onClick={handleModalClose} />
             </div>
-            <div className="grid grid-cols-2 gap-x-8 gap-y-10">
-              <>
+            <div className="flex flex-col gap-5 pb-36">
+              <div className="flex items-center gap-3 border border-solid border-tailCall-border-light-500 rounded-lg py-3 px-6">
+                <Search width={20} height={20} className="text-tailCall-light-500" />
+                <input
+                  name="tag"
+                  type="text"
+                  value={query}
+                  onChange={handleQueryChange}
+                  placeholder="Search Tags"
+                  className="text-black placeholder:text-tailCall-light-500 border-none outline-none text-content-small"
+                />
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-8 md:gap-y-10">
                 {Object.keys(searchResults).map((category: string) => {
                   return (
-                    <div className="flex flex-col gap-4">
-                      <span className="text-title-small text-black">{category}</span>
+                    <div className="flex flex-col gap-3 md:gap-4" key={category}>
+                      <span className="text-title-tiny md:text-title-small text-black">{category}</span>
                       {searchResults?.[category]?.map((tag: BlogTag) => (
                         <Link
+                          key={tag.label}
                           to={tag.permalink}
                           onClick={handleModalClose}
                           className="text-content-small text-black px-3 py-1 border border-solid border-tailCall-border-light-500 rounded-3xl w-fit cursor-pointer hover:no-underline"
@@ -96,13 +104,11 @@ const TagSelectionModal: React.FC<TagSelectionModalProps> = ({open, onClose}) =>
                     </div>
                   )
                 })}
-              </>
+              </div>
             </div>
           </div>
-        </div>
-      ) : (
-        <></>
-      )}
+        </>
+      ) : null}
     </>
   )
 }

diff --git a/src/components/blog/TagSelectionModal/styles.module.css b/src/components/blog/TagSelectionModal/styles.module.css
@@ -1,5 +1,9 @@
-.tagSelectionModalContainer {
-  z-index: var(--ifm-z-index-fixed);
+.modalContainer {
+  z-index: calc(var(--ifm-z-index-fixed) + 2);
   top: var(--ifm-navbar-height);
   box-shadow: -56px 32px 48px 0px rgba(0, 0, 0, 0.08);
 }
+
+.modalOverlay {
+  z-index: calc(var(--ifm-z-index-fixed) + 1);
+}