Merge pull request #3120 from github/nora/make-top-banner-sticky

Make model editor top banner sticky

Author: norascheuch

extensions/ql-vscode/CHANGELOG.md

@@ -7,6 +7,7 @@
 - Preserve focus on results viewer when showing a location in a file. [#3088](https://github.com/github/vscode-codeql/pull/3088)
 - The `dataflowtracking` and `tainttracking` snippets expand to the new module-based interface. [#3091](https://github.com/github/vscode-codeql/pull/3091)
 - The compare view will now show a loading message while the results are loading. [#3107](https://github.com/github/vscode-codeql/pull/3107)
+- Make top-banner of the model editor sticky [#3120](https://github.com/github/vscode-codeql/pull/3120)
 
 ## 1.10.0 - 16 November 2023
 

extensions/ql-vscode/src/view/model-editor/ModelEditor.tsx

@@ -27,14 +27,18 @@ const LoadingContainer = styled.div`
   font-weight: 600;
 `;
 
-const ModelEditorContainer = styled.div`
-  margin-top: 1rem;
-`;
+const ModelEditorContainer = styled.div``;
 
 const HeaderContainer = styled.div`
   display: flex;
   flex-direction: row;
   align-items: end;
+  background-color: var(--vscode-editor-background);
+  position: sticky;
+  z-index: 1;
+  top: 0;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
 `;
 
 const HeaderColumn = styled.div`
@@ -67,7 +71,7 @@ const EditorContainer = styled.div`
 const ButtonsContainer = styled.div`
   display: flex;
   gap: 0.4em;
-  margin-bottom: 1rem;
+  margin-top: 1rem;
 `;
 
 type Props = {
@@ -300,6 +304,25 @@ export function ModelEditor({
               </LinkIconButton>
             )}
           </HeaderRow>
+          <HeaderRow>
+            <ButtonsContainer>
+              <VSCodeButton
+                onClick={onSaveAllClick}
+                disabled={modifiedSignatures.size === 0}
+              >
+                Save all
+              </VSCodeButton>
+              <VSCodeButton appearance="secondary" onClick={onRefreshClick}>
+                Refresh
+              </VSCodeButton>
+              {viewState.showGenerateButton &&
+                viewState.mode === Mode.Framework && (
+                  <VSCodeButton onClick={onGenerateFromSourceClick}>
+                    Generate
+                  </VSCodeButton>
+                )}
+            </ButtonsContainer>
+          </HeaderRow>
         </HeaderColumn>
         <HeaderSpacer />
         <HeaderColumn>
@@ -313,23 +336,6 @@ export function ModelEditor({
       </HeaderContainer>
 
       <EditorContainer>
-        <ButtonsContainer>
-          <VSCodeButton
-            onClick={onSaveAllClick}
-            disabled={modifiedSignatures.size === 0}
-          >
-            Save all
-          </VSCodeButton>
-          <VSCodeButton appearance="secondary" onClick={onRefreshClick}>
-            Refresh
-          </VSCodeButton>
-          {viewState.showGenerateButton &&
-            viewState.mode === Mode.Framework && (
-              <VSCodeButton onClick={onGenerateFromSourceClick}>
-                Generate
-              </VSCodeButton>
-            )}
-        </ButtonsContainer>
         <ModeledMethodsList
           methods={methods}
           modeledMethodsMap={modeledMethods}