fix: bottom padding on views so last row clears keyboard hints pill

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/colors/ColorsView.tsx

@@ -130,7 +130,7 @@ export function ColorsView() {
   }
 
   return (
-    <div className="h-full overflow-auto p-4">
+    <div className="h-full overflow-auto p-4 pb-20">
       <div className="mb-4 flex items-center gap-2 text-text-muted">
         <Palette className="h-4 w-4" />
         <span className="text-sm font-medium">

frontend/src/components/duplicates/DuplicatesView.tsx

@@ -178,7 +178,7 @@ export function DuplicatesView() {
   }
 
   return (
-    <div className="h-full overflow-auto bg-bg p-4">
+    <div className="h-full overflow-auto bg-bg p-4 pb-20">
       <div className="mb-4 flex items-center gap-2 text-xs text-text-muted">
         <Info className="h-3.5 w-3.5" />
         <span>

frontend/src/components/people/PeopleView.tsx

@@ -149,7 +149,7 @@ export function PeopleView() {
   }
 
   return (
-    <div className="h-full overflow-auto p-4">
+    <div className="h-full overflow-auto p-4 pb-20">
       <div className="mb-4 flex items-center gap-2 text-text-muted">
         <Users className="h-4 w-4" />
         <span className="text-sm font-medium">

frontend/src/components/rated/RatedView.tsx

@@ -118,7 +118,7 @@ export function RatedView() {
   }
 
   return (
-    <div className="h-full overflow-auto p-4">
+    <div className="h-full overflow-auto p-4 pb-20">
       <div className="mb-4 flex items-center gap-2 text-text-muted">
         <Star className="h-4 w-4" />
         <span className="text-sm font-medium">

frontend/src/components/tags/TagsView.tsx

@@ -86,7 +86,7 @@ export function TagsView() {
   }
 
   return (
-    <div className="h-full overflow-auto p-4">
+    <div className="h-full overflow-auto p-4 pb-20">
       <div className="mb-4 flex items-center gap-2 text-text-muted">
         <TagIcon className="h-4 w-4" />
         <span className="text-sm font-medium">

frontend/src/components/timeline/Timeline.tsx

@@ -694,7 +694,9 @@ export function Timeline() {
       <div
         ref={parentRef}
         className="h-full overflow-auto bg-bg"
-        style={{ padding: `${PADDING}px` }}
+        // Extra bottom padding so the last row clears the floating
+        // KeyboardHints pill (which sits at bottom-4, ~40px tall).
+        style={{ padding: `${PADDING}px`, paddingBottom: `${PADDING + 64}px` }}
       >
         <div
           style={{