Merge pull request #2652 from github/robertbrignull/data_narrow

Make the data extensions editor look a little bit better at small screen sizes

Author: robertbrignull

extensions/ql-vscode/src/view/data-extensions-editor/MethodClassifications.tsx

@@ -15,6 +15,7 @@ const ClassificationsContainer = styled.div`
 
 const ClassificationTag = styled(VSCodeTag)`
   font-size: 0.75em;
+  white-space: nowrap;
 `;
 
 type Props = {

extensions/ql-vscode/src/view/data-extensions-editor/MethodRow.tsx

@@ -208,14 +208,14 @@ function ModelableMethodRow(props: Props) {
     <VSCodeDataGridRow>
       <ApiOrMethodCell gridColumn={1}>
         <ModelingStatusIndicator status={modelingStatus} />
+        <MethodClassifications externalApiUsage={externalApiUsage} />
         <ExternalApiUsageName {...props} />
         {mode === Mode.Application && (
           <UsagesButton onClick={jumpToUsage}>
             {externalApiUsage.usages.length}
           </UsagesButton>
         )}
         <ViewLink onClick={jumpToUsage}>View</ViewLink>
-        <MethodClassifications externalApiUsage={externalApiUsage} />
       </ApiOrMethodCell>
       <VSCodeDataGridCell gridColumn={2}>
         <Dropdown

extensions/ql-vscode/src/view/data-extensions-editor/ModeledMethodDataGrid.tsx

@@ -37,7 +37,7 @@ export const ModeledMethodDataGrid = ({
   );
 
   return (
-    <VSCodeDataGrid gridTemplateColumns="0.4fr 0.15fr 0.15fr 0.15fr 0.15fr">
+    <VSCodeDataGrid gridTemplateColumns="0.5fr 0.125fr 0.125fr 0.125fr 0.125fr">
       <VSCodeDataGridRow rowType="header">
         <VSCodeDataGridCell cellType="columnheader" gridColumn={1}>
           API or method