Skip to content
Apparo

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.

Before: action extends beyond the card

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.

After: link wraps, action stays available

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; }
}
Send a similar task

Found me on Upwork or Fiverr? Keep the conversation on that platform.