Merge branch 'main' into feature/runtime-size-configuration

frontend/src/assets/cog-tooth.tsx

@@ -8,7 +8,6 @@ function CogTooth(): JSX.Element {
       viewBox="0 0 24 24"
       strokeWidth="1.5"
       stroke="currentColor"
-      className="w-6 h-6"
     >
       <path
         strokeLinecap="round"

frontend/src/components/features/sidebar/sidebar.tsx

@@ -55,17 +55,20 @@ export function Sidebar() {
   return (
     <>
       <aside className="h-[40px] md:h-auto px-1 flex flex-row md:flex-col gap-1">
-        <div className="w-[34px] h-[34px] flex items-center justify-center">
+        <nav className="flex flex-row md:flex-col items-center gap-[18px]">
+          <div className="w-[34px] h-[34px] flex items-center justify-center">
+            <AllHandsLogoButton onClick={handleClickLogo} />
+          </div>
           {user.isLoading && <LoadingSpinner size="small" />}
-          {!user.isLoading && <AllHandsLogoButton onClick={handleClickLogo} />}
-        </div>
-
-        <nav className="md:py-[18px] flex flex-row md:flex-col items-center gap-[18px]">
-          <UserActions
-            user={user.data ? { avatar_url: user.data.avatar_url } : undefined}
-            onLogout={logout}
-            onClickAccountSettings={() => setAccountSettingsModalOpen(true)}
-          />
+          {!user.isLoading && (
+            <UserActions
+              user={
+                user.data ? { avatar_url: user.data.avatar_url } : undefined
+              }
+              onLogout={logout}
+              onClickAccountSettings={() => setAccountSettingsModalOpen(true)}
+            />
+          )}
           <SettingsButton onClick={() => setSettingsModalIsOpen(true)} />
           <DocsButton />
           <ExitProjectButton

frontend/src/components/features/sidebar/user-avatar.tsx

@@ -16,7 +16,7 @@ export function UserAvatar({ onClick, avatarUrl, isLoading }: UserAvatarProps) {
       type="button"
       onClick={onClick}
       className={cn(
-        "bg-white w-8 h-8 rounded-full flex items-center justify-center",
+        "w-8 h-8 rounded-full flex items-center justify-center border-2 border-gray-200",
         isLoading && "bg-transparent",
       )}
     >