Merge pull request #157 from jahn96/sticky

Last fixes

Author: Waidhoferj

src/components/Onboarding/ColumnSelectorSidebar.tsx

@@ -247,12 +247,16 @@ export default function ColumnSelectorSidebar(props: { plotArgs: Args }) {
                 <span style={{ padding: '0px 5px', fontSize: 12 }}>
                   {column}
                 </span>
-                <button
-                  className={`tagButton_${column}`}
-                  onClick={() => handleDelete(column)}
-                >
-                  <X size={10} />
-                </button>
+                {preSelectedColumns.has(column) ? (
+                  <Lock size={15} />
+                ) : (
+                  <button
+                    className={`tagButton_${column}`}
+                    onClick={() => handleDelete(column)}
+                  >
+                    <X size={10} />
+                  </button>
+                )}
               </div>
             </Pill>
           );

src/components/Sidebar/Tabs/EditTab.tsx

@@ -528,7 +528,10 @@ export default function EditTab({
                 {chartIcons.map(({ icon: Icon, mark }) => {
                   return (
                     <li key={mark}>
-                      <Tooltip message={mark} position="top">
+                      <Tooltip
+                        message={mark}
+                        position={mark === 'errorbar' ? 'left' : 'top'}
+                      >
                         <button
                           className={mark === graphMark ? 'active' : ''}
                           onClick={() => handleClickOnMark(mark)}

src/components/Sidebar/Tabs/FilterScreen.tsx

@@ -19,14 +19,17 @@ const screenCss = (theme: BifrostTheme) => css`
   top: 0;
   background-color: ${theme.color.background[0]};
   width: 100%;
-  height: 100%;
   padding: 15px;
 
   .filter-nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 15px;
+    position: sticky;
+    top: 0;
+    background-color: ${theme.color.background[0]};
+    z-index: 1;
   }
   nav {
     padding-bottom: 5px;

src/components/ui-widgets/Slider.tsx

@@ -41,7 +41,7 @@ export default function RangeSlider({
       className="RangeSlider"
       css={css`
         width: 100%;
-        padding: 12px;
+        padding: 12px 20px;
         width: ${width}px;
       `}
     >
@@ -102,7 +102,7 @@ function Tooltip(props: TooltipProps) {
   const tooltipCss = css`
     left: ${props.percent}%;
     position: absolute;
-    margin-left: -11px;
+    margin-left: -25px;
     margin-top: -35px;
     padding: 10px;
   `;