fix: #308

Author: karannfr

src/app/pinned/page.tsx

@@ -10,7 +10,7 @@ const Pinned = () => {
   const [displayPapers, setDisplayPapers] = useState<IUpcomingPaper[]>([]);
   return (
     <div id="pinned" className="mt-5 flex flex-col justify-between">
-      <h1 className="mx-auto my-8 hidden text-center font-vipnabd text-3xl font-extrabold md:block">
+      <h1 className="mx-auto my-8 text-center font-vipnabd text-xl font-extrabold sm:text-2xl md:text-3xl">
         Pinned Subjects
       </h1>
       <div className="mb-3 flex w-full flex-col items-center gap-2 px-6">

src/components/PinButton.tsx

@@ -15,7 +15,7 @@ export default function PinButton({
     <button
       type="submit"
       onClick={onToggle}
-      className={`ml-2 flex items-center gap-2 rounded-full border border-[#3A3745] px-4 py-2 text-sm font-medium transition ${
+      className={`flex items-center gap-2 rounded-full border border-[#3A3745] px-3 py-3 sm:px-4 sm:py-2 text-sm font-medium transition ${
         isPinned
           ? "bg-purple-700 text-white hover:bg-purple-600 dark:bg-purple-600 dark:hover:bg-purple-500"
           : "bg-[#e8e9ff] text-gray-700 hover:bg-slate-50 dark:bg-black dark:text-white dark:hover:bg-[#1A1823]"

src/components/PinnedPapersCarousel.tsx

@@ -110,7 +110,7 @@ function PinnedPapersCarousel({
   const plugins = [Autoplay({ delay: 8000, stopOnInteraction: true })];
 
   return (
-    <div className="px-4">
+    <div className="px-4 sm:mt-4">
       <div className="">
         {displayPapers.length > 0 ?
         <Carousel

src/components/Searchbar/pinned-searchbar.tsx

@@ -24,9 +24,7 @@ function PinnedSearchBar({
   const [searchText, setSearchText] = useState("");
   const [suggestions, setSuggestions] = useState<string[]>([]);
   const suggestionsRef = useRef<HTMLUListElement | null>(null);
-  const floatingContainerRef = useRef<HTMLDivElement>(null);
   const [pinned, setPinned] = useState<boolean>(false);
-  const [open, setOpen] = useState(false);
   const [showControls, setShowControls] = useState(false);
   const searchRef = useRef<HTMLInputElement>(null);
 
@@ -69,19 +67,6 @@ function PinnedSearchBar({
     filtersNotPulled?.();
   };
 
-  const handleClickOutside = (event: MouseEvent) => {
-    const target = event.target as Node;
-    if (
-      floatingContainerRef.current &&
-      !floatingContainerRef.current.contains(target)
-    ) {
-      setOpen(false);
-    }
-
-    if (suggestionsRef.current && !suggestionsRef.current.contains(target)) {
-      setSuggestions([]);
-    }
-  };
 
   useEffect(() => {
     const handleAddClicked = () => {
@@ -146,7 +131,6 @@ function PinnedSearchBar({
   const handleRemoveAll = () => {
     localStorage.setItem("userSubjects", JSON.stringify([]));
     window.dispatchEvent(new Event("userSubjectsChanged"));
-    setOpen(false);
   };
 
   useEffect(() => {
@@ -157,23 +141,16 @@ function PinnedSearchBar({
     if (storedSubjects.length > 0) {
       setShowControls(true);
     }
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
   }, []);
 
   return (
     <div className="w-full font-play">
       <div className="flex justify-center">
-        <div className="w-full max-w-xl">
+        <div className="w-full max-w-2xl">
           <form
             onSubmit={(e) => {
               e.preventDefault();
               handlePinToggle();
-              if(searchText.trim()!=="")
-                setOpen(false);
             }}
           >
             <div className="flex items-center gap-2">
@@ -211,66 +188,31 @@ function PinnedSearchBar({
                   </ul>
                 )}
               </div>
-
-              <div className="hidden md:block">
-                <PinButton
-                  isPinned={pinned}
-                  onToggle={handlePinToggle}
-                  disabled={!showControls || searchText.trim() === ""}
-                />
-              </div>
-
-              <div
-                ref={floatingContainerRef}
-                className={`md:hidden ${showControls ? "block" : "hidden"}`}
+              <PinButton
+                isPinned={pinned}
+                onToggle={handlePinToggle}
+                disabled={!showControls || searchText.trim() === ""}
+              />
+              <button
+                onClick={() => {
+                  handleRemoveAll();
+                }}
+                className="items-center gap-2 rounded-full border border-[#3A3745] bg-[#e8e9ff] px-3 py-1.5 text-sm font-semibold text-gray-700 transition hover:bg-slate-50 dark:bg-black dark:text-white dark:hover:bg-[#1A1823] hidden sm:flex"
               >
-                <NavDropdownButton
-                  isOpen={open}
-                  onClick={() => setOpen((prev) => !prev)}
-                  variant="pinned"
-                />
-
-                <div className={`${open ? "block" : "hidden"}`}>
-                  <FloatingControls>
-                    <PinButton
-                      isPinned={pinned}
-                      onToggle={() => {
-                        handlePinToggle();
-                        setOpen(false);
-                      }}
-                      disabled={!showControls || searchText.trim() === ""}
-                    />
-                    {displayPapers &&
-                    <button
-                      onClick={() => {
-                        handleRemoveAll();
-                        setOpen(false);
-                      }}
-                      className="flex items-center gap-2 rounded-full border border-[#3A3745] bg-[#e8e9ff] px-3 py-1.5 text-sm font-semibold text-gray-700 transition hover:bg-slate-50 dark:bg-black dark:text-white dark:hover:bg-[#1A1823]"
-                    >
-                      Remove All <X className="h-4 w-4" />
-                    </button>}
-                  </FloatingControls>
-                </div>
-              </div>
+                Remove All <X className="h-4 w-4" />
+              </button>
             </div>
           </form>
         </div>
       </div>
-      {displayPapers && 
-      <div className="mt-2 hidden w-full md:block">
-        <div className="ml-auto w-fit">
-          <button
-            onClick={() => {
-              handleRemoveAll();
-              setOpen(false);
-            }}
-            className="flex items-center gap-2 rounded-full border border-[#3A3745] bg-[#e8e9ff] px-3 py-1.5 text-sm font-semibold text-gray-700 transition hover:bg-slate-50 dark:bg-black dark:text-white dark:hover:bg-[#1A1823]"
-          >
-            Remove All <X className="h-4 w-4" />
-          </button>
-        </div>
-      </div>}
+      <button
+        onClick={() => {
+          handleRemoveAll();
+        }}
+        className="sm:hidden mt-4 flex items-center gap-2 rounded-full border border-[#3A3745] bg-[#e8e9ff] px-3 py-1.5 text-sm font-semibold text-gray-700 transition hover:bg-slate dark:bg-black dark:text-white dark:hover:bg-[#1A1823]"
+      >
+        Remove All <X className="h-4 w-4" />
+      </button>
     </div>
   );
 }

src/components/bannerDismiss.tsx

@@ -52,7 +52,7 @@ export default function Banner({
 
         <button
           onClick={closeBanner}
-          className="absolute right-4 top-6 transition hover:opacity-75 sm:static sm:self-start"
+          className="absolute right-4 transition hover:opacity-75 sm:static sm:self-start"
           aria-label="Dismiss banner"
           style={{ color: accentColor }}
         >