From b2ec7df66696866205cfc909ebef2a79a058d10f Mon Sep 17 00:00:00 2001
From: leex279 <thomas@thirty3.de>
Date: Sat, 13 Sep 2025 22:28:37 +0200
Subject: [PATCH] Fix list semantics and increase aurora padding
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Wrap ProjectCard components in <li> elements for proper ul > li structure
- Improve accessibility by fixing list semantics
- Increase left/right padding from pl-3/pr-3 to pl-6 md:pl-8 / pr-6 md:pr-8
- Ensures aurora effects (-inset-[100px] + blur-3xl) and shadows (15-20px) have adequate clearance
- Responsive padding: 24px mobile, 32px desktop for optimal glow visibility

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../projects/components/ProjectList.tsx       | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/archon-ui-main/src/features/projects/components/ProjectList.tsx b/archon-ui-main/src/features/projects/components/ProjectList.tsx
index 8823414d..7b4b769e 100644
--- a/archon-ui-main/src/features/projects/components/ProjectList.tsx
+++ b/archon-ui-main/src/features/projects/components/ProjectList.tsx
@@ -98,18 +98,19 @@ export const ProjectList: React.FC<ProjectListProps> = ({
 
   return (
     <motion.div initial="hidden" animate="visible" className="relative mb-10" variants={itemVariants}>
-      <div className="overflow-x-auto overflow-y-visible pb-4 pt-2 pr-3 scrollbar-thin">
-        <ul className="flex gap-4 min-w-max pl-3" aria-label="Projects">
+      <div className="overflow-x-auto overflow-y-visible pb-4 pt-2 pr-6 md:pr-8 scrollbar-thin">
+        <ul className="flex gap-4 min-w-max pl-6 md:pl-8" aria-label="Projects">
           {sortedProjects.map((project) => (
-            <ProjectCard
-              key={project.id}
-              project={project}
-              isSelected={selectedProject?.id === project.id}
-              taskCounts={taskCounts[project.id] || { todo: 0, doing: 0, review: 0, done: 0 }}
-              onSelect={onProjectSelect}
-              onPin={onPinProject}
-              onDelete={onDeleteProject}
-            />
+            <li key={project.id}>
+              <ProjectCard
+                project={project}
+                isSelected={selectedProject?.id === project.id}
+                taskCounts={taskCounts[project.id] || { todo: 0, doing: 0, review: 0, done: 0 }}
+                onSelect={onProjectSelect}
+                onPin={onPinProject}
+                onDelete={onDeleteProject}
+              />
+            </li>
           ))}
         </ul>
       </div>