fix: package manager visual regressions

microsoft · Feb 3, 2023 · 918642a · 918642a
1 parent 192ea82
commit 918642a
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/extensions/packageManager/src/components/LibraryList.tsx b/extensions/packageManager/src/components/LibraryList.tsx
@@ -166,6 +166,7 @@ export const LibraryList: React.FC<ILibraryListProps> = (props) => {
           selection={selection}
           selectionMode={SelectionMode.single}
           setKey="none"
+          onShouldVirtualize={() => false}
         />
       </div>
     </div>

diff --git a/extensions/packageManager/src/components/styles.ts b/extensions/packageManager/src/components/styles.ts
@@ -8,7 +8,13 @@ export const packageScrollContainerStyle = {
   root: { borderTop: '1px solid #CCC', height: 'calc(100% - 150px)' },
 };
 
-export const tabAndSearchBarStyles = { root: { paddingLeft: '12px', paddingRight: '20px', height: '48px' } };
+export const tabAndSearchBarStyles = {
+  root: {
+    paddingLeft: '12px',
+    paddingRight: '20px',
+    height: '48px',
+  },
+};
 
 export const ContentHeaderStyle = css`
   padding: 5px 20px;

diff --git a/extensions/packageManager/src/pages/Library.tsx b/extensions/packageManager/src/pages/Library.tsx
@@ -80,8 +80,11 @@ const InstallButtonVersion = styled.span`
 `;
 
 const tabsStackStyle = css`
-  min-width: 512px;
-  overflow: auto;
+  overflow: hidden auto;
+  max-height: 100%;
+  flex: auto;
+  display: flex;
+  flex-flow: column nowrap;
 `;
 
 const fieldStyles = {
@@ -655,7 +658,7 @@ const Library: React.FC = () => {
             />
           </Stack.Item>
         )}
-        <Stack.Item align="stretch" styles={{ root: { flexGrow: 1, overflowX: 'hidden', maxHeight: '100%' } }}>
+        <Stack.Item align="stretch" css={tabsStackStyle}>
           {!ejectedRuntime && (
             <MessageBar
               actions={
@@ -681,8 +684,8 @@ const Library: React.FC = () => {
                 <PivotItem headerText={strings.installHeader} itemKey={TABS.INSTALL} />
               </Pivot>
             </Stack.Item>
-            <Stack.Item align="end" grow={1}>
-              <Stack horizontal css={tabsStackStyle} horizontalAlign="center" tokens={{ childrenGap: 10 }}>
+            <Stack.Item align="center" grow={1}>
+              <Stack horizontal grow={1} horizontalAlign="end" tokens={{ childrenGap: 10 }} verticalAlign="center">
                 <Stack.Item>
                   <Dropdown
                     ariaLabel={formatMessage('Feeds')}