feat: center hints over the timeline + add hubris footer
- KeyboardHints: switch from fixed positioning to absolute, mounted inside the main content column. The column is now relative-positioned so the hints overlay centers against the timeline area instead of the raw viewport (which was off-center because of the sidebars). - AppFooter: tiny "Built with hubris • <YEAR in roman>" pinned to the bottom-right corner of the main column. Year is computed at render time and converted via a small toRoman helper. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -25,7 +25,11 @@ export function KeyboardHints() {
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="pointer-events-none fixed bottom-4 left-1/2 z-30 -translate-x-1/2">
|
||||
// Absolute (not fixed) so the parent's flex/position context can
|
||||
// center it relative to the timeline area, not the viewport. Mount
|
||||
// inside the main column in App.tsx so it isn't offset by the
|
||||
// sidebar widths.
|
||||
<div className="pointer-events-none absolute bottom-4 left-1/2 z-30 -translate-x-1/2">
|
||||
<div className="pointer-events-auto flex items-center gap-3 rounded-full border border-border/60 bg-surface/40 px-4 py-1.5 shadow-lg ring-1 ring-white/5 backdrop-blur-md">
|
||||
{hints.map((hint, i) => (
|
||||
<div key={i} className="flex items-center gap-1.5">
|
||||
|
||||
Reference in New Issue
Block a user