Browse Source

fix alignment issue (#23)

Bernt Christian Egeland 7 tháng trước cách đây
mục cha
commit
44f46a0963

+ 1 - 1
src/features/workboard/Components/BoardDayCell.tsx

@@ -30,7 +30,7 @@ export function BoardDayCell({
     <div
     <div
       ref={setNodeRef}
       ref={setNodeRef}
       className={cn(
       className={cn(
-        "flex min-h-[80px] flex-col gap-1 rounded-md border p-1 transition-colors",
+        "flex min-h-[80px] flex-col gap-1 overflow-hidden rounded-md border p-1 transition-colors",
         isOver && "border-primary bg-primary/5",
         isOver && "border-primary bg-primary/5",
         isToday && "border-primary/30 bg-primary/5",
         isToday && "border-primary/30 bg-primary/5",
       )}
       )}

+ 1 - 1
src/features/workboard/Components/TechnicianRow.tsx

@@ -18,7 +18,7 @@ export function TechnicianRow({
   onTechClick?: (technician: Technician) => void;
   onTechClick?: (technician: Technician) => void;
 }) {
 }) {
   return (
   return (
-    <div className="grid grid-cols-[140px_repeat(7,1fr)] gap-1">
+    <div className="contents">
       {/* Tech name column */}
       {/* Tech name column */}
       <button
       <button
         type="button"
         type="button"

+ 24 - 21
src/features/workboard/Components/WorkBoardClient.tsx

@@ -332,28 +332,31 @@ export function WorkBoardClient({
         <div className="flex flex-1 gap-4 overflow-hidden">
         <div className="flex flex-1 gap-4 overflow-hidden">
           {/* Main grid */}
           {/* Main grid */}
           <ScrollArea className="flex-1">
           <ScrollArea className="flex-1">
-            <div className="min-w-[900px] space-y-1">
+            <div
+              className="min-w-[900px] grid gap-1"
+              style={{
+                gridTemplateColumns: `140px ${days.map((d) => (d === toLocalDateString(new Date()) ? "minmax(0,2fr)" : "minmax(0,1fr)")).join(" ")}`,
+              }}
+            >
               {/* Day headers */}
               {/* Day headers */}
-              <div className="grid grid-cols-[140px_repeat(7,1fr)] gap-1">
-                <div />
-                {days.map((day, i) => {
-                  const isToday = day === toLocalDateString(new Date());
-                  const d = new Date(day + "T12:00:00");
-                  const dayLabel = `${t(`days.${DAY_KEYS[i]}`)} ${d.getDate()}`;
-                  return (
-                    <div
-                      key={day}
-                      className={`rounded-md px-2 py-1 text-center text-xs font-medium ${
-                        isToday
-                          ? "bg-primary text-primary-foreground"
-                          : "text-muted-foreground"
-                      }`}
-                    >
-                      {dayLabel}
-                    </div>
-                  );
-                })}
-              </div>
+              <div />
+              {days.map((day, i) => {
+                const isToday = day === toLocalDateString(new Date());
+                const d = new Date(day + "T12:00:00");
+                const dayLabel = `${t(`days.${DAY_KEYS[i]}`)} ${d.getDate()}`;
+                return (
+                  <div
+                    key={day}
+                    className={`rounded-md px-2 py-1 text-center text-xs font-medium ${
+                      isToday
+                        ? "bg-primary text-primary-foreground"
+                        : "text-muted-foreground"
+                    }`}
+                  >
+                    {dayLabel}
+                  </div>
+                );
+              })}
 
 
               {/* Technician rows */}
               {/* Technician rows */}
               {store.technicians.map((tech) => (
               {store.technicians.map((tech) => (