Add max-width for remote queries results page

Author: aeisenberg

extensions/ql-vscode/src/remote-queries/view/FileCodeSnippet.tsx

@@ -37,7 +37,6 @@ const shouldHighlightLine = (lineNumber: number, highlightedRegion: HighlightedR
 const Container = styled.div`
   font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
   font-size: x-small;
-  width: 55em;
 `;
 
 const TitleContainer = styled.div`

extensions/ql-vscode/src/remote-queries/view/RemoteQueries.tsx

@@ -325,6 +325,7 @@ const AnalysesResults = ({
         queryResult={queryResult}
         analysesResults={analysesResults} />
 
+      <VerticalSpace size={2} />
       <RepositoriesSearch
         filterValue={filterValue}
         setFilterValue={setFilterValue} />
@@ -368,18 +369,20 @@ export function RemoteQueries(): JSX.Element {
   }
 
   try {
-    return <div>
-      <ThemeProvider colorMode="auto">
-        <ViewTitle>{queryResult.queryTitle}</ViewTitle>
-        <QueryInfo {...queryResult} />
-        <Failures {...queryResult} />
-        <Summary queryResult={queryResult} analysesResults={analysesResults} />
-        <AnalysesResults
-          queryResult={queryResult}
-          analysesResults={analysesResults}
-          totalResults={queryResult.totalResultCount} />
-      </ThemeProvider>
-    </div>;
+    return (
+      <div className="vscode-codeql__remote-queries">
+        <ThemeProvider colorMode="auto">
+          <ViewTitle>{queryResult.queryTitle}</ViewTitle>
+          <QueryInfo {...queryResult} />
+          <Failures {...queryResult} />
+          <Summary queryResult={queryResult} analysesResults={analysesResults} />
+          <AnalysesResults
+            queryResult={queryResult}
+            analysesResults={analysesResults}
+            totalResults={queryResult.totalResultCount} />
+        </ThemeProvider>
+      </div>
+    );
   } catch (err) {
     console.error(err);
     return <div>There was an error displaying the view.</div>;

extensions/ql-vscode/src/remote-queries/view/RepositoriesSearch.tsx

@@ -14,7 +14,8 @@ const RepositoriesSearch = ({ filterValue, setFilterValue }: RepositoriesSearchP
       block
       sx={{
         backgroundColor: 'var(--vscode-editor-background);',
-        color: 'var(--vscode-editor-foreground);'
+        color: 'var(--vscode-editor-foreground);',
+        width: 'calc(100% - 14px)',
       }}
       className="vscode-codeql__repositories-search"
       leadingVisual={SearchIcon}

extensions/ql-vscode/src/remote-queries/view/remoteQueries.css

@@ -1,3 +1,7 @@
+.vscode-codeql__remote-queries {
+  max-width: 55em;
+}
+
 .vscode-codeql__query-info-link {
   text-decoration: none;
   padding-right: 1em;
@@ -41,7 +45,6 @@
 }
 
 .vscode-codeql__repositories-search {
-  margin: 1em 0 0 0;
 }
 
 .vscode-codeql__flat-list {