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 (
- {
if (node) {
measurementsRef.current = node
@@ -68,35 +68,37 @@ export const Ribbon: React.FC = () => {
ref(node)
}}
data-testid="ribbon"
- className={cx(styles.list, needsShadow && styles.withShadow)}
+ className={cx(styles.ribbon, needsShadow && styles.withShadow)}
>
- -
-
-
- -
-
-
- -
-
-
- {revisions.map(revision => (
- removeRevision(revision.id)}
- />
- ))}
+
+ -
+
+
+ -
+
+
+ -
+
+
+ {revisions.map(revision => (
+ removeRevision(revision.id)}
+ />
+ ))}
+
-
+
)
}
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;