fix: fix user dropdown

Signed-off-by: Henry Gressmann <mail@henrygressmann.de>

Author: explodingcamera

web/src/components/projects.tsx

@@ -62,7 +62,7 @@ export const Projects = () => {
 	if (isError)
 		return (
 			<div className={styles.info}>
-				<h1>Failed to load data</h1>
+				<h1>Failed to load dashboard</h1>
 			</div>
 		);
 

web/src/components/settings/tables.tsx

@@ -78,13 +78,7 @@ export const ProjectsTable = () => {
 		{
 			id: "displayName",
 			header: "Name",
-			render: (row) => <span>{row.displayName}</span>,
-			nowrap: true,
-		},
-		{
-			id: "id",
-			header: "ID",
-			render: (row) => <i>{row.id}</i>,
+			render: (row) => <span data-tooltip={`ID: ${row.id}`}>{row.displayName}</span>,
 			nowrap: true,
 		},
 		{

web/src/components/toast.module.css

@@ -12,7 +12,7 @@
 .toast {
   padding: 0.8rem 1.1rem;
   font-size: 0.9rem;
-  color: #fff;
+  color: #000;
   box-shadow: var(--pico-card-box-shadow);
   border-radius: var(--pico-border-radius, 0.5rem);
 }

web/src/components/userInfo.module.css

@@ -1,5 +1,6 @@
 details.user {
   margin: 0;
+  position: initial;
 
   summary {
     display: flex;

web/src/global.css

@@ -79,8 +79,8 @@ hr {
 
 details.dropdown.right summary + ul {
   left: unset;
-  right: 2rem;
-  transform: translateX(4px) translateY(-2px);
+  right: 0;
+  transform: translateX(-4px);
   min-width: 11rem;
   width: auto;
 }

web/src/layouts/Layout.astro

@@ -22,7 +22,6 @@ const { title } = Astro.props;
       </ul>
       <ul>
         <li class="login"><LoginButton client:only="react" /></li>
-    
       </ul>
     </nav>
   </header>
@@ -36,6 +35,10 @@ const { title } = Astro.props;
     flex: 1;
   }
 
+  .login {
+    position: relative;
+  }
+
   nav {
     height: 3rem;
   }