diff --git a/webview/src/plots/components/ribbon/Errors.tsx b/webview/src/plots/components/ribbon/Errors.tsx index 4aac4facba..33fc25100b 100644 --- a/webview/src/plots/components/ribbon/Errors.tsx +++ b/webview/src/plots/components/ribbon/Errors.tsx @@ -23,7 +23,7 @@ export const Errors: React.FC = () => { } return ( -
  • +
    -
  • + ) } diff --git a/webview/src/plots/components/ribbon/Ribbon.tsx b/webview/src/plots/components/ribbon/Ribbon.tsx index 2f254eeb99..8d313060aa 100644 --- a/webview/src/plots/components/ribbon/Ribbon.tsx +++ b/webview/src/plots/components/ribbon/Ribbon.tsx @@ -24,7 +24,7 @@ export const Ribbon: React.FC = () => { rootMargin: '-5px', threshold: 0.95 }) - const measurementsRef = useRef() + const measurementsRef = useRef() const dispatch = useDispatch() const revisions = useSelector( @@ -60,7 +60,7 @@ export const Ribbon: React.FC = () => { }, [changeRibbonHeight]) return ( - + ) } diff --git a/webview/src/plots/components/ribbon/styles.module.scss b/webview/src/plots/components/ribbon/styles.module.scss index d6131d2f97..44fcaaca90 100644 --- a/webview/src/plots/components/ribbon/styles.module.scss +++ b/webview/src/plots/components/ribbon/styles.module.scss @@ -166,26 +166,30 @@ } } -.list { - display: flex; +.ribbon { position: sticky; - align-items: center; - gap: 6px; - border-bottom: 1px solid $border-color; - padding: 10px 15px; - margin: 0; - flex-wrap: wrap; - top: 0; - width: 100%; + transition: box-shadow 0.25s; z-index: 100; + top: 0; background-color: $bg-color; - transition: box-shadow 0.25s; + border-bottom: 1px solid $border-color; + padding: 10px 15px; &.withShadow { box-shadow: 0 5px 8px -2px $shadow; } } +.list { + display: flex; + align-items: center; + gap: 6px; + margin: 0; + padding: 0; + flex-wrap: wrap; + width: 100%; +} + .buttonWrapper { list-style: none; } @@ -200,7 +204,7 @@ } .errors { - margin: 5px 0 0; + margin: 10px 0 0; color: $error-color; border-top: 1px solid $error-color; border-bottom: 1px solid $error-color;