From c4cacc958fcd008b97981512dcf922b6ac0f8ce8 Mon Sep 17 00:00:00 2001 From: Xavier Abad Date: Tue, 3 Feb 2026 19:03:47 +0100 Subject: [PATCH 1/3] fix: reserve space for scroll bar to avoid content shift --- src/index.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/index.scss b/src/index.scss index ac63ca8fd..a1efff009 100644 --- a/src/index.scss +++ b/src/index.scss @@ -411,3 +411,9 @@ abbr[title] { @apply text-gray-80 hover:text-gray-100; } } + +/* Saving space for the scrollbar when it is not visible so that the content does not shift */ +/* stylelint-disable-next-line selector-id-pattern */ +#scrollableList { + scrollbar-gutter: stable; +} From 0bb7a66bc35c44cda3a8748d9034464ea0b41e8f Mon Sep 17 00:00:00 2001 From: Xavier Abad Date: Tue, 10 Feb 2026 12:52:10 +0100 Subject: [PATCH 2/3] fix: backups list --- src/views/Backups/components/BackupListItem.tsx | 4 ++-- src/views/Backups/components/DeviceListItem.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/views/Backups/components/BackupListItem.tsx b/src/views/Backups/components/BackupListItem.tsx index 17f1341ec..00a801549 100644 --- a/src/views/Backups/components/BackupListItem.tsx +++ b/src/views/Backups/components/BackupListItem.tsx @@ -49,12 +49,12 @@ export default function BackupListItem({ item, onItemClicked }: Readonly {/* DATE */} -
+
{dateService.formatDefaultDate(item.updatedAt, t)}
{/* SIZE */} -
+
{sizeService.bytesToString(item.size, false) === '' || item.isFolder ? ( — ) : ( diff --git a/src/views/Backups/components/DeviceListItem.tsx b/src/views/Backups/components/DeviceListItem.tsx index d1faf9c2e..f0de91e13 100644 --- a/src/views/Backups/components/DeviceListItem.tsx +++ b/src/views/Backups/components/DeviceListItem.tsx @@ -53,7 +53,7 @@ interface DeviceDateCellProps { } export function DeviceDateCell({ device, translate }: Readonly): JSX.Element { - return
{dateService.formatDefaultDate(device.updatedAt, translate)}
; + return
{dateService.formatDefaultDate(device.updatedAt, translate)}
; } interface DeviceSizeCellProps { @@ -62,5 +62,5 @@ interface DeviceSizeCellProps { export function DeviceSizeCell({ device }: Readonly): JSX.Element { const size = 'size' in device && device.size > 0 ? sizeService.bytesToString(device.size) : '-'; - return
{size}
; + return
{size}
; } From 0a5468d937aeca2887d8aaf932e81131176f9104 Mon Sep 17 00:00:00 2001 From: Xavier Abad Date: Tue, 10 Feb 2026 15:52:48 +0100 Subject: [PATCH 3/3] fix: styles for List items and skeleton --- package.json | 2 +- src/components/Skeleton.tsx | 11 +++++------ src/index.scss | 6 ------ src/views/Backups/components/BackupListItem.tsx | 4 ++-- src/views/Backups/components/DeviceListItem.tsx | 4 ++-- .../components/DriveExplorerListItem.tsx | 4 ++-- src/views/Shared/components/SharedListItem.tsx | 6 +++--- yarn.lock | 8 ++++---- 8 files changed, 19 insertions(+), 26 deletions(-) diff --git a/package.json b/package.json index cb53e70ca..b0d42a24f 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "@internxt/css-config": "1.1.0", "@internxt/lib": "1.4.1", "@internxt/sdk": "=1.12.4", - "@internxt/ui": "0.1.1", + "@internxt/ui": "=0.1.2", "@phosphor-icons/react": "^2.1.7", "@popperjs/core": "^2.11.6", "@reduxjs/toolkit": "^1.6.0", diff --git a/src/components/Skeleton.tsx b/src/components/Skeleton.tsx index 76110e6c7..845eb833b 100644 --- a/src/components/Skeleton.tsx +++ b/src/components/Skeleton.tsx @@ -1,9 +1,8 @@ export const skinSkeleton = [ -
-
-
+
+
+
, -
, -
, -
, +
, +
, ]; diff --git a/src/index.scss b/src/index.scss index a1efff009..ac63ca8fd 100644 --- a/src/index.scss +++ b/src/index.scss @@ -411,9 +411,3 @@ abbr[title] { @apply text-gray-80 hover:text-gray-100; } } - -/* Saving space for the scrollbar when it is not visible so that the content does not shift */ -/* stylelint-disable-next-line selector-id-pattern */ -#scrollableList { - scrollbar-gutter: stable; -} diff --git a/src/views/Backups/components/BackupListItem.tsx b/src/views/Backups/components/BackupListItem.tsx index 00a801549..17f1341ec 100644 --- a/src/views/Backups/components/BackupListItem.tsx +++ b/src/views/Backups/components/BackupListItem.tsx @@ -49,12 +49,12 @@ export default function BackupListItem({ item, onItemClicked }: Readonly {/* DATE */} -
+
{dateService.formatDefaultDate(item.updatedAt, t)}
{/* SIZE */} -
+
{sizeService.bytesToString(item.size, false) === '' || item.isFolder ? ( — ) : ( diff --git a/src/views/Backups/components/DeviceListItem.tsx b/src/views/Backups/components/DeviceListItem.tsx index f0de91e13..d1faf9c2e 100644 --- a/src/views/Backups/components/DeviceListItem.tsx +++ b/src/views/Backups/components/DeviceListItem.tsx @@ -53,7 +53,7 @@ interface DeviceDateCellProps { } export function DeviceDateCell({ device, translate }: Readonly): JSX.Element { - return
{dateService.formatDefaultDate(device.updatedAt, translate)}
; + return
{dateService.formatDefaultDate(device.updatedAt, translate)}
; } interface DeviceSizeCellProps { @@ -62,5 +62,5 @@ interface DeviceSizeCellProps { export function DeviceSizeCell({ device }: Readonly): JSX.Element { const size = 'size' in device && device.size > 0 ? sizeService.bytesToString(device.size) : '-'; - return
{size}
; + return
{size}
; } diff --git a/src/views/Drive/components/DriveExplorer/components/DriveExplorerListItem.tsx b/src/views/Drive/components/DriveExplorer/components/DriveExplorerListItem.tsx index b0a8f2776..9cc109098 100644 --- a/src/views/Drive/components/DriveExplorer/components/DriveExplorerListItem.tsx +++ b/src/views/Drive/components/DriveExplorer/components/DriveExplorerListItem.tsx @@ -112,12 +112,12 @@ const DriveExplorerListItem = ({ item }: DriveExplorerItemProps): JSX.Element => } {/* DATE */} -
+
{dateService.formatDefaultDate(item.updatedAt, t)}
{/* SIZE */} -
+
{sizeService.bytesToString(item.size, false) === '' || item.isFolder ? ( — ) : ( diff --git a/src/views/Shared/components/SharedListItem.tsx b/src/views/Shared/components/SharedListItem.tsx index 6efd6950d..e242686e3 100644 --- a/src/views/Shared/components/SharedListItem.tsx +++ b/src/views/Shared/components/SharedListItem.tsx @@ -86,7 +86,7 @@ export const SharedListItem = ({
{/* OWNER */} -
+
{/* SIZE */} -
+
{sizeService.bytesToString(item.size, false) === '' || item.isFolder ? ( — ) : ( @@ -117,7 +117,7 @@ export const SharedListItem = ({
{/* DATE */} -
+
{dateService.format(item.createdAt, 'D MMM YYYY')}
diff --git a/yarn.lock b/yarn.lock index 92db71b54..9468d0b3b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1914,10 +1914,10 @@ axios "1.13.2" uuid "11.1.0" -"@internxt/ui@0.1.1": - version "0.1.1" - resolved "https://registry.yarnpkg.com/@internxt/ui/-/ui-0.1.1.tgz#9fe2439caae946d969544523e9f0321c48db712a" - integrity sha512-OCbrjt6ODQUzfC31PvgXJq+C+EcqGgekyEj4xxieEwrg0MiAfm7aH3Hx+DCabLVdTOp4XQ2HQFu15mVFsLj9+A== +"@internxt/ui@=0.1.2": + version "0.1.2" + resolved "https://registry.yarnpkg.com/@internxt/ui/-/ui-0.1.2.tgz#32da0a4940eb9386906408f497f524a3983f74d2" + integrity sha512-6ukWlUQRNgOLanwpFiQt+zk0YHE8xc7GkiOd53WwkadOgusfhQOFPL8tBzPmLZKvjtmyGwGTOpai/ceyyQSGKA== dependencies: "@internxt/css-config" "1.1.0" "@phosphor-icons/react" "^2.1.10"