feat(ui): enhance responsiveness and add scroll features

- Implement responsive design adjustments for mobile and desktop views
- Add scroll percentage tracking for better user experience
- Introduce a floating scroll-to-top button
- Update plot types catalog with new entries and descriptions

Author: MarkusNeusinger

app/src/App.tsx

@@ -2,6 +2,8 @@ import { useState, useEffect, useCallback, useRef } from 'react';
 import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 import Alert from '@mui/material/Alert';
+import Fab from '@mui/material/Fab';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 
 import type { PlotImage, LibraryInfo, SpecInfo } from './types';
 import { API_URL, type ImageSize } from './constants';
@@ -62,6 +64,7 @@ function App() {
     const stored = localStorage.getItem('imageSize');
     return stored === 'normal' || stored === 'compact' ? stored : 'normal';
   });
+  const [showScrollTop, setShowScrollTop] = useState(false);
 
   // Refs
   const searchInputRef = useRef<HTMLInputElement>(null);
@@ -71,6 +74,15 @@ function App() {
     localStorage.setItem('imageSize', imageSize);
   }, [imageSize]);
 
+  // Show/hide scroll-to-top button based on scroll position
+  useEffect(() => {
+    const handleScroll = () => {
+      setShowScrollTop(window.scrollY > 300);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
   // Handle card click - open modal
   const handleCardClick = useCallback(
     (img: PlotImage) => {
@@ -214,6 +226,25 @@ function App() {
         onClose={() => setModalImage(null)}
         onTrackEvent={trackEvent}
       />
+
+      {/* Floating scroll-to-top button */}
+      <Fab
+        size="small"
+        onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+        sx={{
+          position: 'fixed',
+          bottom: 24,
+          right: 24,
+          bgcolor: '#f3f4f6',
+          color: '#6b7280',
+          opacity: showScrollTop ? 1 : 0,
+          visibility: showScrollTop ? 'visible' : 'hidden',
+          transition: 'opacity 0.3s, visibility 0.3s',
+          '&:hover': { bgcolor: '#e5e7eb', color: '#3776AB' },
+        }}
+      >
+        <KeyboardArrowUpIcon />
+      </Fab>
     </Box>
   );
 }

app/src/components/FilterBar.tsx

@@ -12,6 +12,8 @@ import SearchIcon from '@mui/icons-material/Search';
 import AddIcon from '@mui/icons-material/Add';
 import ViewAgendaIcon from '@mui/icons-material/ViewAgenda';
 import ViewModuleIcon from '@mui/icons-material/ViewModule';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTheme } from '@mui/material/styles';
 
 import type { FilterCategory, ActiveFilters, FilterCounts } from '../types';
 import { FILTER_LABELS, FILTER_CATEGORIES } from '../types';
@@ -51,6 +53,37 @@ export function FilterBar({
   onRemoveGroup,
   onTrackEvent,
 }: FilterBarProps) {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+
+  // Scroll percentage - estimate based on total plots, not just loaded ones
+  const [scrollPercent, setScrollPercent] = useState(0);
+
+  useEffect(() => {
+    const calculatePercent = () => {
+      const scrollY = window.scrollY;
+      const docHeight = document.documentElement.scrollHeight;
+      const windowHeight = window.innerHeight;
+
+      // Estimate total height based on ratio of loaded vs total plots
+      const loadRatio = displayedCount > 0 && currentTotal > 0
+        ? currentTotal / displayedCount
+        : 1;
+      const estimatedTotalHeight = (docHeight - windowHeight) * loadRatio;
+
+      const percent = Math.round((scrollY / estimatedTotalHeight) * 100);
+      setScrollPercent(Math.min(100, Math.max(0, percent || 0)));
+    };
+    calculatePercent();
+    window.addEventListener('scroll', calculatePercent);
+    const resizeObserver = new ResizeObserver(calculatePercent);
+    resizeObserver.observe(document.body);
+    return () => {
+      window.removeEventListener('scroll', calculatePercent);
+      resizeObserver.disconnect();
+    };
+  }, [displayedCount, currentTotal]);
+
   // Search/dropdown state
   const [searchQuery, setSearchQuery] = useState('');
   const [dropdownAnchor, setDropdownAnchor] = useState<HTMLElement | null>(null);
@@ -260,11 +293,11 @@ export function FilterBar({
           gap: 1,
           justifyContent: 'center',
           alignItems: 'center',
-          position: 'relative',
+          position: { xs: 'static', md: 'relative' },
         }}
       >
-        {/* Progress counter - absolute left */}
-        {currentTotal > 0 && (
+        {/* Progress counter - absolute left (desktop only) */}
+        {!isMobile && currentTotal > 0 && (
           <Typography
             sx={{
               position: 'absolute',
@@ -275,31 +308,33 @@ export function FilterBar({
               whiteSpace: 'nowrap',
             }}
           >
-            {Math.min(displayedCount, currentTotal)} / {currentTotal}
+            {scrollPercent}% · {currentTotal}
           </Typography>
         )}
-        {/* Grid size toggle - absolute right */}
-        <Box
-          onClick={() => onImageSizeChange(imageSize === 'normal' ? 'compact' : 'normal')}
-          sx={{
-            position: 'absolute',
-            right: 0,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: 32,
-            height: 32,
-            cursor: 'pointer',
-            color: '#9ca3af',
-            '&:hover': { color: '#3776AB' },
-          }}
-        >
-          {imageSize === 'normal' ? (
-            <ViewAgendaIcon sx={{ fontSize: '1.25rem' }} />
-          ) : (
-            <ViewModuleIcon sx={{ fontSize: '1.25rem' }} />
-          )}
-        </Box>
+        {/* Grid size toggle - absolute right (desktop only) */}
+        {!isMobile && (
+          <Box
+            onClick={() => onImageSizeChange(imageSize === 'normal' ? 'compact' : 'normal')}
+            sx={{
+              position: 'absolute',
+              right: 0,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: 32,
+              height: 32,
+              cursor: 'pointer',
+              color: '#9ca3af',
+              '&:hover': { color: '#3776AB' },
+            }}
+          >
+            {imageSize === 'normal' ? (
+              <ViewAgendaIcon sx={{ fontSize: '1.25rem' }} />
+            ) : (
+              <ViewModuleIcon sx={{ fontSize: '1.25rem' }} />
+            )}
+          </Box>
+        )}
         {/* Active filter chips */}
       {activeFilters.map((group, index) => {
         const isAnimating = randomAnimation?.index === index;
@@ -363,8 +398,8 @@ export function FilterBar({
             gap: 0.5,
             px: isSearchExpanded ? 1.5 : 0,
             height: 32,
-            width: isSearchExpanded ? 'auto' : 32,
-            minWidth: isSearchExpanded ? 120 : 32,
+            width: isSearchExpanded ? { xs: 80, sm: 160, md: 'auto' } : 32,
+            minWidth: isSearchExpanded ? { xs: 80, sm: 160, md: 120 } : 32,
             border: isSearchExpanded ? '1px dashed #9ca3af' : 'none',
             borderRadius: '16px',
             bgcolor: isDropdownOpen ? '#f9fafb' : 'transparent',
@@ -441,6 +476,52 @@ export function FilterBar({
       )}
       </Box>
 
+      {/* Counter and toggle row (mobile only) */}
+      {isMobile && (
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            mt: 1,
+          }}
+        >
+          {currentTotal > 0 ? (
+            <Typography
+              sx={{
+                fontFamily: '"MonoLisa", "MonoLisa Fallback", monospace',
+                fontSize: '0.75rem',
+                color: '#9ca3af',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {scrollPercent}% · {currentTotal}
+            </Typography>
+          ) : (
+            <Box />
+          )}
+          <Box
+            onClick={() => onImageSizeChange(imageSize === 'normal' ? 'compact' : 'normal')}
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: 32,
+              height: 32,
+              cursor: 'pointer',
+              color: '#9ca3af',
+              '&:hover': { color: '#3776AB' },
+            }}
+          >
+            {imageSize === 'normal' ? (
+              <ViewAgendaIcon sx={{ fontSize: '1.25rem' }} />
+            ) : (
+              <ViewModuleIcon sx={{ fontSize: '1.25rem' }} />
+            )}
+          </Box>
+        </Box>
+      )}
+
       {/* Dropdown menu */}
       <Menu
         anchorEl={dropdownAnchor}

app/src/components/Header.tsx

@@ -15,7 +15,8 @@ interface HeaderProps {
 
 export const Header = memo(function Header({ stats, onRandom }: HeaderProps) {
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+  const isXs = useMediaQuery(theme.breakpoints.down('sm'));
+  const isSm = useMediaQuery(theme.breakpoints.between('sm', 'md'));
   const [tooltipOpen, setTooltipOpen] = useState(false);
   const [pinned, setPinned] = useState(false);  // true = opened via click, stays open
   const tooltipText = stats
@@ -52,7 +53,7 @@ export const Header = memo(function Header({ stats, onRandom }: HeaderProps) {
           fontFamily: '"MonoLisa", "MonoLisa Fallback", monospace',
           mb: { xs: 2, md: 3 },
           letterSpacing: '-0.02em',
-          fontSize: { xs: '2rem', md: '3.75rem' },
+          fontSize: { xs: '2rem', sm: '2.75rem', md: '3.75rem' },
         }}
       >
         <Link
@@ -119,7 +120,7 @@ export const Header = memo(function Header({ stats, onRandom }: HeaderProps) {
           fontSize: { xs: '0.875rem', md: '1rem' },
         }}
       >
-        {isMobile ? 'ai-powered python plots' : 'library-agnostic, ai-powered python plotting examples.'}
+        {isXs ? 'ai-powered python plots' : isSm ? 'library-agnostic, ai-powered python plotting.' : 'library-agnostic, ai-powered python plotting examples.'}
       </Typography>
       <Typography
         variant="body1"
@@ -184,7 +185,7 @@ export const Header = memo(function Header({ stats, onRandom }: HeaderProps) {
             ✦
           </Box>
         )}
-        {isMobile ? '. copy. create.' : '. grab the code. make it yours.'}
+        {isXs ? '. copy. create.' : '. grab the code. make it yours.'}
       </Typography>
     </Box>
   );