artlu.ai
100 days. 100 features.
Just AI and an internet connection.
day 64/100 · 82 shipped · 18 to go
← all projects
day 21 · apr 7, 2026 · launched

demo links, UI layout update — artlu.ai

fixed ▶ demo not appearing for artifact-embedded projects, swapped hostname labels for "site ↗", and tightened table column widths so the title column dominates.

  • Links.jsx — artifact demo fix: artifactHtml is a firestore field that stores raw html for embedded demos. the links column was only checking for a media url — if a project had artifactHtml but no media, it rendered —. added a check: if artifactHtml is a non-empty string, show ▶ demo. rendered as a <span> without stopPropagation so the click bubbles up to the row's expand handler naturally.
  • Links.jsx — hostname → "site ↗": was displaying the full url hostname (e.g. vibeskill-prototype.pages.dev ↗). long hostnames pushed the links column wide. changed to always render "site ↗" — matches the original spec in rules.md and keeps the column compact regardless of url length.
  • ProjectTable.jsx — column widths: added width: "1%" to the status, stack, date, and links <th> elements. in css tables, 1% is a shrink-to-content signal — the browser makes those columns as narrow as their content allows, surrendering all remaining horizontal space to the project title column.
  • ProjectTable.jsx — stack column floor: stack entries can be long (6–8 technologies). with width: 1% alone, the column was wrapping too aggressively. added minWidth: 180 to set a lower bound without giving up the compactness on short stacks.

stack

ReactViteFirestore