AgendaPro/.superpowers/sdd/task-8-report.md

Task 8 — Fix de iconos solapados (@layer components + pl-10)

Files changed

1. src/index.css — wrapped the .input, .select, .textarea { ... } block AND its :focus rule in @layer components { ... } (now lines 272–292).
2. src/pages/public/BookingPage.tsx — in DetailsForm, changed the three className="input pl-9" → className="input pl-10" (Nombre, Teléfono, Correo; lines 664, 678, 692).

Verification results

Check	Result
npm run typecheck	✅ 0 errors (tsc -b --noEmit exited clean)
npm run build	✅ Succeeded in 5.06s — dist/assets/index-*.css emitted (36.19 kB). Confirms @layer components is valid CSS and Tailwind processes it.
Grep: padding: 0.55rem 0.75rem outside @layer components	✅ Only occurrence is on line 280, which is INSIDE the @layer components { ... } block (lines 272–292). No bare occurrence remains.
Grep: BookingPage input pl-	✅ All three now read input pl-10 (lines 664, 678, 692). No pl-9 remains.

Untouched (pre-existing WIP, not modified by this task)

FullCalendar section in src/index.css (lines 131–163) — unchanged

Shown verbatim from the file after my edit:

.fc-event {
  border: none !important;
  border-radius: 0.45rem !important;
  padding: 2px 5px !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
  overflow: hidden;
}
.fc-event:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.25);
}
.fc-daygrid-event {
  margin-top: 2px;
}
.fc .fc-timegrid-slot {
  height: 2.4rem;
}
.fc-timegrid-event {
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.fc-timegrid-event-harness {
  margin-right: 2px !important;
}
/* When slotEventOverlap is false, FullCalendar puts a small gap between
   side-by-side events; tighten it a touch so each event gets more readable
   width without bleeding into its neighbour. */
.fc .fc-timegrid-col-events {
  column-gap: 2px;
}

Note: git diff src/index.css does show these FullCalendar lines as additions vs. HEAD, but they were already present in the working tree before Task 8 began (pre-existing WIP on the branch). My edit call only targeted the .input/.select/.textarea block — its oldString/newString did not include any FullCalendar text — so I did not modify this section.

src/components/AppointmentModal.tsx and src/pages/CalendarPage.tsx

Listed as modified in git status (pre-existing WIP from earlier tasks on this branch). I did not open, read, or edit either file during Task 8 — my only tool calls against the repo were the two edit operations on src/index.css and src/pages/public/BookingPage.tsx, plus read-only verification commands.

Diff of MY two files (only the parts I changed)

--- a/src/index.css
+++ b/src/index.css
@@ -258,24 +269,26 @@ body {
   background: #fecaca;
 }

-.input,
-.select,
-.textarea {
-  width: 100%;
-  ...
-  outline: none;
-}
-.input:focus,
-.select:focus,
-.textarea:focus {
-  border-color: #3b66ff;
-  box-shadow: 0 0 0 3px rgba(59, 102, 255, 0.15);
+@layer components {
+  .input,
+  .select,
+  .textarea {
+    width: 100%;
+    ...
+    outline: none;
+  }
+  .input:focus,
+  .select:focus,
+  .textarea:focus {
+    border-color: #3b66ff;
+    box-shadow: 0 0 0 3px rgba(59, 102, 255, 0.15);
+  }
 }

--- a/src/pages/public/BookingPage.tsx
+++ b/src/pages/public/BookingPage.tsx
@@ -661,7 +661,7 @@
-                className="input pl-9"
+                className="input pl-10"
@@ -675,7 +675,7 @@
-                  className="input pl-9"
+                  className="input pl-10"
@@ -689,7 +689,7 @@
-                  className="input pl-9"
+                  className="input pl-10"

Self-review

• Does @layer components now wrap the input rule? YES. src/index.css lines 272–292 open with @layer components { and close with }; the .input/.select/.textarea block and the :focus rule are both inside it, indented one level.

• Will pl-9/pl-10 utilities now override the component padding shorthand? YES. Tailwind emits its utilities through @tailwind utilities; (line 3 of index.css), which places them in the utilities CSS cascade layer. Per the CSS cascade-layer ordering rule, declarations in a layer declared later beat declarations in an earlier layer at equal specificity, regardless of source order. The layer order established by the three @tailwind directives is base → components → utilities, so the utilities layer (containing .pl-10 { padding-left: 2.5rem }) wins over the components layer (containing .input { padding: 0.55rem 0.75rem }). Before this change, .input was declared outside any layer, which made it an unlayered style — and unlayered styles beat layered styles in the cascade, so the utility was losing. Wrapping in @layer components fixes this app-wide for every .input/.select/.textarea that uses pl-*/pr-* (LoginPage, BookingPage, etc.).

• Why pl-10 (2.5rem = 40px) instead of pl-9 (2.25rem = 36px)? Icons sit at left-3 (12px) and are h-4 w-4 (16px), so they occupy roughly 12–28px of horizontal space. pl-9 left only an 8px gap between icon edge and text start, which clipped ascenders/descenders and made placeholders appear to overlap the icon. pl-10 gives a comfortable 12px gap (text starts at 40px, icon ends ~28px). Combined with the layer fix above, the utility now actually applies.

Concerns

None. No commit performed (per instructions). Build and typecheck both green. Pre-existing WIP files left exactly as found.