Apparo demonstration · synthetic content · not client work
One component. A visible repair.
A long project link pushes an action outside a narrow card. This deliberately broken example shows the fault, the small CSS change and what to check before handover.
Project reference
https://example.com/projects/a-very-long-unbroken-project-reference-for-layout-testing
The inner row is intentionally wider than its clipped frame. No real project or action is connected.
Project reference
https://example.com/projects/a-very-long-unbroken-project-reference-for-layout-testing
The content can shrink and wrap. On narrow screens the action moves below it.
Acceptance checks
- At 320, 390, 768 and 1440 pixels, the repaired card fits its container.
- The full reference stays readable and the Review control remains visible.
- The action is reachable by keyboard and keeps a visible focus ring.
- No page, backend, authentication or production data changes are needed.
The handover
A focused patch, the affected component, screenshots at the agreed widths and the checks performed. This isolated layout example does not claim experience repairing an unknown production application.
.row { display: flex; gap: 1rem; }
.content { min-width: 0; flex: 1; }
.reference { overflow-wrap: anywhere; }
.action { flex-shrink: 0; }
@media (max-width: 639px) {
.row { flex-direction: column; }
}Found me on Upwork or Fiverr? Keep the conversation on that platform.