BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: adjust model picker scroll shadows

Browse Source
This commit is contained in:
Bohdan Triapitsyn
2026-08-10 20:55:39 +03:00
parent 75978cf188
commit fb286653f1
2 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/model-picker/ModelPickerList.tsx
+6 -6
View File
@@ -288,9 +288,9 @@ const SortableProviderSection: React.FC<{
}; };
const STICKY_HEADER_OFFSET = 32; const STICKY_HEADER_OFFSET = 32;
const STICKY_FADE_MAX_SIZE = 48; const STICKY_FADE_MAX_SIZE = 52;
const STICKY_FADE_MIN_SIZE = 32; const STICKY_FADE_MIN_SIZE = 36;
const STICKY_FADE_CLEAR_MAX_SIZE = 24; const STICKY_FADE_CLEAR_MAX_SIZE = 28;
const scrollIntoView = (container: HTMLElement | null, node: HTMLElement | null) => { const scrollIntoView = (container: HTMLElement | null, node: HTMLElement | null) => {
if (!node) return; if (!node) return;
@@ -420,8 +420,8 @@ export const ModelPickerList: React.FC<ModelPickerListProps> = ({
const selectionStore = selectionStoreRef.current; const selectionStore = selectionStoreRef.current;
const itemRefs = React.useRef<(HTMLDivElement | null)[]>([]); const itemRefs = React.useRef<(HTMLDivElement | null)[]>([]);
const scrollRef = React.useRef<HTMLElement | null>(null); const scrollRef = React.useRef<HTMLElement | null>(null);
const sectionHeaderSentinelRefs = React.useRef<Map<string, HTMLDivElement | null>>(new Map());
const stickyFadeSizeRef = React.useRef(0); const stickyFadeSizeRef = React.useRef(0);
const sectionHeaderSentinelRefs = React.useRef<Map<string, HTMLDivElement | null>>(new Map());
const [stuckSectionHeaders, setStuckSectionHeaders] = React.useState<Set<string>>(new Set()); const [stuckSectionHeaders, setStuckSectionHeaders] = React.useState<Set<string>>(new Set());
const keyboardOwnsSelectionRef = React.useRef(false); const keyboardOwnsSelectionRef = React.useRef(false);
const lastMousePositionRef = React.useRef<{ x: number; y: number } | null>(null); const lastMousePositionRef = React.useRef<{ x: number; y: number } | null>(null);
@@ -882,8 +882,8 @@ export const ModelPickerList: React.FC<ModelPickerListProps> = ({
<ScrollableOverlay <ScrollableOverlay
ref={scrollRef} ref={scrollRef}
useScrollShadow={stickyHeaders} useScrollShadow={stickyHeaders}
hideTopScrollShadow={!stickyHeaders} hideBottomScrollShadow
scrollShadowSize={96} scrollShadowSize={12}
outerClassName={maxHeightClassName} outerClassName={maxHeightClassName}
className="oc-sticky-fade-scroller overlay-scrollbar-target--no-gutter" className="oc-sticky-fade-scroller overlay-scrollbar-target--no-gutter"
style={{ style={{
packages/ui/src/components/ui/ScrollableOverlay.tsx
+4
View File
@@ -18,6 +18,8 @@ type ScrollableOverlayProps = React.HTMLAttributes<HTMLElement> & {
scrollShadowSize?: number; scrollShadowSize?: number;
/** Suppress the top fade (e.g. when sticky headers sit at the top edge). */ /** Suppress the top fade (e.g. when sticky headers sit at the top edge). */
hideTopScrollShadow?: boolean; hideTopScrollShadow?: boolean;
/** Suppress the bottom fade while retaining scroll-state tracking. */
hideBottomScrollShadow?: boolean;
userIntentOnly?: boolean; userIntentOnly?: boolean;
/** Forwarded to the inner element (e.g. textarea). */ /** Forwarded to the inner element (e.g. textarea). */
disabled?: boolean; disabled?: boolean;
@@ -40,6 +42,7 @@ export const ScrollableOverlay = React.forwardRef<HTMLElement, ScrollableOverlay
useScrollShadow = false, useScrollShadow = false,
scrollShadowSize, scrollShadowSize,
hideTopScrollShadow = false, hideTopScrollShadow = false,
hideBottomScrollShadow = false,
userIntentOnly = false, userIntentOnly = false,
...rest ...rest
}, ref) => { }, ref) => {
@@ -61,6 +64,7 @@ export const ScrollableOverlay = React.forwardRef<HTMLElement, ScrollableOverlay
ref={containerRef as React.Ref<HTMLElement>} ref={containerRef as React.Ref<HTMLElement>}
size={scrollShadowSize} size={scrollShadowSize}
hideTopShadow={hideTopScrollShadow} hideTopShadow={hideTopScrollShadow}
hideBottomShadow={hideBottomScrollShadow}
className={cn( className={cn(
"overlay-scrollbar-target overlay-scrollbar-container", "overlay-scrollbar-target overlay-scrollbar-container",
preventOverscroll && "overscroll-none", preventOverscroll && "overscroll-none",