fix responsiveness

src/app/globals.css

@@ -3,11 +3,7 @@
 @tailwind utilities;
 
 .thumbnail-container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    margin: 0.5rem;
-    width: 60%
+    @apply flex flex-wrap lg:justify-start justify-center lg:w-2/3 w-full;
 }
 
 .thumbnail-item {

src/components/Header.tsx

@@ -43,7 +43,7 @@ export default function Header() {
         </Link>
       </NavbarBrand>
       <NavbarContent justify="end">
-        <NavbarItem className="lg:flex items-center">
+        <NavbarItem className="flex items-center">
           <Switch
             defaultSelected
             size="lg"
@@ -60,8 +60,8 @@ export default function Header() {
           />
           { authenticated ? (
             <>
-              <UserDetails name={user?.name ?? ''} className="px-2.5"/>
-              <LogoutButton/>
+              <UserDetails name={user?.name ?? ''}/>
+              <LogoutButton className="pl-2.5"/>
             </>
           ) : <></>}
         </NavbarItem>

src/components/LogoutButton.tsx

@@ -1,20 +1,38 @@
 import {useAuth} from '@/app/AuthProvider';
 import {Button} from '@nextui-org/button';
 import {LuLogOut} from 'react-icons/lu';
+import {Tooltip} from '@nextui-org/tooltip';
 
-const LogoutButton = () => {
+const LogoutButton = ({className}: {className?: string}) => {
   const { logout } = useAuth();
 
   return (
-    <Button
-      color="primary"
-      variant="light"
-      endContent={<LuLogOut size={25} />}
-      onClick={logout}
-    >
-      Logg ut
-    </Button>
-  );
+    <>
+      <div className={`block lg:hidden ${className}`}>
+        <Tooltip content="Logg ut">
+          <Button
+            color="secondary"
+            variant="flat"
+            onClick={logout}
+            isIconOnly
+          >
+            <LuLogOut size={16}/>
+          </Button>
+        </Tooltip>
+      </div>
+      <div className={'hidden lg:block'}>
+        <Button
+          color="secondary"
+          variant="light"
+          endContent={<LuLogOut size={16}/>}
+          onClick={logout}
+        >
+          Logg ut
+        </Button>
+      </div>
+    </>
+  )
+  ;
 };
 
 export default LogoutButton;

src/components/UserDetails.tsx

@@ -2,6 +2,7 @@
 
 import {User} from '@nextui-org/user';
 import {useEffect, useState} from 'react';
+import {Avatar} from '@nextui-org/avatar';
 
 interface UserDetailsProps {
   name: string;
@@ -17,14 +18,22 @@ export const UserDetails: React.FC<UserDetailsProps> = ({ name, className }) =>
   }, [name]);
 
   return (
-    <div className={`flex items-center ${className}`}>
-      <User
-        name={name}
-        avatarProps={{
-          name: initials,
-          isBordered: false,
-        }}
-      />
+    <div className={`${className}`}>
+      <div className="block lg:hidden ">
+        <Avatar
+          name={initials}
+          isBordered={false}
+        />
+      </div>
+      <div className="hidden lg:flex items-center ">
+        <User
+          name={name}
+          avatarProps={{
+            name: initials,
+            isBordered: false,
+          }}
+        />
+      </div>
     </div>
   );
 };