fix: [lw-12153] style nft folder to maintain its height if empty(#1708)

input-output-hk · Feb 13, 2025 · 9ff3b74 · 9ff3b74
1 parent 2321381
commit 9ff3b74
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 5 deletions.
diff --git a/apps/browser-extension-wallet/src/features/nfts/components/Nfts.module.scss b/apps/browser-extension-wallet/src/features/nfts/components/Nfts.module.scss
@@ -17,6 +17,7 @@
     padding-bottom:size_unit(2);
     display: flex;
     flex-direction: column;
+    gap: size-unit(2);
   }
   .content::-webkit-scrollbar {
     width: 0;
@@ -91,3 +92,8 @@
     }
   }
 }
+
+.grid {
+  row-gap: 0;
+  column-gap: 0;
+}
diff --git a/apps/browser-extension-wallet/src/features/nfts/components/Nfts.tsx b/apps/browser-extension-wallet/src/features/nfts/components/Nfts.tsx
@@ -208,6 +208,7 @@ export const Nfts = withNftsFoldersContext((): React.ReactElement => {
               columns={2}
               scrollableTargetId={extensionScrollableContainerID}
               items={isLoadingFirstTime ? [] : nftstoDisplay}
+              gridClassName={styles.grid}
             />
           </div>
         </div>

diff --git a/packages/common/src/ui/components/VirtualisedGrid/VirtualisedGrid.tsx b/packages/common/src/ui/components/VirtualisedGrid/VirtualisedGrid.tsx
@@ -19,6 +19,7 @@ export type GridProps<T> = VirtuosoGridProps<T, null> & {
   testId?: string;
   tableReference?: React.Ref<HTMLDivElement>;
   columns?: VirtualisedGridColumns;
+  gridClassName?: string;
 };
 
 /**
@@ -66,14 +67,15 @@ export const VirtualisedGrid = <T extends Record<string, unknown> | undefined>({
   tableReference,
   testId,
   columns,
+  gridClassName,
   ...props
 }: GridProps<T>): React.ReactElement => {
   const [scrollableTargetReference] = useQuerySelectorRef(`#${scrollableTargetId}`);
 
   return (
     <div ref={tableReference} data-testid={testId}>
       <VirtuosoGrid<T>
-        listClassName={cn(styles.grid, { [styles[`grid-${columns}`]]: columns })}
+        listClassName={cn(styles.grid, gridClassName, { [styles[`grid-${columns}`]]: columns })}
         data={items}
         customScrollParent={scrollableTargetReference.current}
         totalCount={items.length}

diff --git a/packages/core/src/ui/components/Nft/NftGrid.tsx b/packages/core/src/ui/components/Nft/NftGrid.tsx
@@ -12,6 +12,7 @@ import { NftItem, NftItemProps } from './NftItem';
 
 export type NftGridProps = Omit<GridProps<NftItemProps | NftFolderItemProps | PlaceholderItem>, 'itemContent'> & {
   isSearching?: boolean;
+  gridClassName?: string;
 };
 
 export const NftGrid = ({

diff --git a/packages/core/src/ui/components/Nft/NftItem.module.scss b/packages/core/src/ui/components/Nft/NftItem.module.scss
@@ -19,7 +19,7 @@
     opacity: 0.24;
   }
   &:hover {
-    background: var(--light-mode-light-grey, var(--dark-mode-mid-grey));
+    background: var(--light-mode-light-grey, var(--dark-mode-grey));
   }
   &:active,
   &:focus {
@@ -123,11 +123,11 @@
 
 .folderContainer {
   position: relative;
+  height: 100%;
 }
 
 .folderWrapper {
-  border: 1px solid var(--light-mode-light-grey-plus, var(--dark-mode-mid-grey));
-  background-color: var(--light-mode-light-grey);
+  background-color: var(--light-mode-light-grey, var(--dark-mode-grey));
   border-radius: 11px;
   display: grid;
   flex: 1;
@@ -140,7 +140,7 @@
   @media (max-width: $breakpoint-popup) {
     width: 147px;
     height: 147px;
-    min-width: 147px;
+    max-width: 100%;
     min-height: 147px;
   }