Overlay Styling Conventions

Reference this when building or modifying frontend overlay UI components.

Icons

Use lucide-react for all icons. Never create SVGs manually.

import { Settings, X, ChevronDown, Globe } from 'lucide-react';

// Usage - set size and optionally strokeWidth
<Settings size={14} />
<X size={20} />

Browse available icons at https://lucide.dev/icons. The package is already installed.

Scrollbars

Hidden scrollbars — for panels where scroll position isn't important to the user (e.g. conversation message lists):

.my-scrollable::-webkit-scrollbar { display: none; }
.my-scrollable { -ms-overflow-style: none; scrollbar-width: none; }

Subtle visible scrollbars — for panels where the user needs to know content is scrollable (e.g. settings modals, forms):

.my-scrollable::-webkit-scrollbar { width: 4px; }
.my-scrollable::-webkit-scrollbar-track { background: transparent; }
.my-scrollable::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}
.my-scrollable::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

Use hidden scrollbars for streaming/chat content. Use subtle visible scrollbars for settings, forms, and content the user actively navigates.