feat: Made header responsive.

zouhir96 · zouhir96 · commit d95655be0592 · 2025-06-23T16:58:55.000+02:00
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -7,7 +7,6 @@
     <meta name="theme-color" content="#000000" />
     <link rel="apple-touch-icon" href="/logo192.png" />
     <link rel="preconnect" href="https://hackertab.dev" />
-    <link href="/src/styles.css" rel="stylesheet" />
     <script src="/startup.js"></script>
 
     <% if (isWebBuild) { %>
diff --git a/src/components/Elements/SearchBar/SearchBar.tsx b/src/components/Elements/SearchBar/SearchBar.tsx
@@ -29,7 +29,7 @@ export const SearchBar = () => {
 
   return (
     <form
-      className="order-2 flex grow items-center gap-2 rounded-full bg-white px-4 py-2 dark:bg-ht-100"
+      className="order-none flex grow items-center gap-2 rounded-full bg-white px-4 py-2 md:order-2 dark:bg-ht-100"
       onSubmit={handleSubmit}>
       {usedSearchEngine?.default === false ? (
         <HiSparkles className="mx-4 size-6 rounded-full" />
diff --git a/src/components/Elements/UserTags/UserTags.tsx b/src/components/Elements/UserTags/UserTags.tsx
@@ -6,7 +6,7 @@ export const UserTags = () => {
   const { userSelectedTags } = useUserPreferences()
 
   return (
-    <div className="order-4 flex w-full flex-wrap items-center gap-2">
+    <div className="order-none hidden w-full flex-wrap items-center gap-2 md:order-4 md:flex">
       {userSelectedTags.map((tag, index) => (
         <span
           key={index}
diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
@@ -57,7 +57,7 @@ export const Header = () => {
   return (
     <>
       <header className="sticky z-[1] mx-[1%] mt-3 mb-0 flex flex-row flex-wrap content-center items-center gap-2.5">
-        <span className="order-1 flex items-center text-ht-900">
+        <span className="order-none flex items-center text-ht-900 md:order-1">
           <i className="relative me-2">
             <CgTab size={24} />
           </i>{' '}
@@ -67,7 +67,7 @@ export const Header = () => {
           <Changelog />
         </span>
         <SearchBar />
-        <div className="order-3 inline-flex flex-row content-center gap-2 gap-y-2">
+        <div className="order-none hidden flex-row content-center gap-2 gap-y-2 md:order-3 md:inline-flex">
           {isDNDModeActive() && (
             <Button onClick={onUnpauseClicked} className="font-bold">
               <MdDoDisturbOff />
@@ -107,7 +107,7 @@ export const Header = () => {
                 </div>
               </>
             ) : (
-              <AvatarPlaceholder className="mt-10 size-34 rounded-xl" />
+              <AvatarPlaceholder className="size-full scale-85 rounded-full" />
             )}
           </CircleButton>
         </div>
diff --git a/src/features/adv/components/AdvBanner.css b/src/features/adv/components/AdvBanner.css
@@ -3,7 +3,8 @@
   padding: initial;
 }
 #banneradv {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
     'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 #banneradv {
@@ -58,7 +59,7 @@
   right: 0;
 }
 
-.hidden {
+#banneradv .hidden {
   width: 0;
   height: 0;
   display: none;

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,8 @@`
`3`	`3`	`padding: initial;`
`4`	`4`	`}`
`5`	`5`	`#banneradv {`
`6`		`- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,`
	`6`	`+ font-family:`
	`7`	`+ -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,`
`7`	`8`	`'Helvetica Neue', Helvetica, Arial, sans-serif;`
`8`	`9`	`}`
`9`	`10`	`#banneradv {`
`@@ -58,7 +59,7 @@`
`58`	`59`	`right: 0;`
`59`	`60`	`}`
`60`	`61`
`61`		`-.hidden {`
	`62`	`+#banneradv .hidden {`
`62`	`63`	`width: 0;`
`63`	`64`	`height: 0;`
`64`	`65`	`display: none;`