Skip to content

fix: added responsive-table class in few tables for mobile responsivness #2757

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
HarshMN2345 wants to merge 2 commits into
base: main
Choose a base branch
from
+212 −161
Open

fix: added responsive-table class in few tables for mobile responsivness #2757

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
12d3614
added responsiv-table class
HarshMN2345 Jan 4, 2026
0f7ce4d
few more tables
HarshMN2345 Jan 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 35 additions & 23 deletions src/lib/components/domains/cnameTable.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,29 +35,31 @@
</Typography.Text>
</Layout.Stack>

<Table.Root
columns={[
{ id: 'type', width: { min: 150 } },
{ id: 'name', width: { min: 80 } },
{ id: 'value', width: { min: 100 } }
]}
let:root>
<svelte:fragment slot="header" let:root>
<Table.Header.Cell column="type" {root}>Type</Table.Header.Cell>
<Table.Header.Cell column="name" {root}>Name</Table.Header.Cell>
<Table.Header.Cell column="value" {root}>Value</Table.Header.Cell>
</svelte:fragment>
<Table.Row.Base {root}>
<Table.Cell column="type" {root}>CNAME</Table.Cell>
<Table.Cell column="name" {root}>{subdomain}</Table.Cell>
<Table.Cell column="value" {root}>
<InteractiveText
variant="copy"
isVisible
text={$regionalConsoleVariables._APP_DOMAIN_TARGET_CNAME} />
</Table.Cell>
</Table.Row.Base>
</Table.Root>
<div class="responsive-table">
<Table.Root
columns={[
{ id: 'type', width: { min: 150 } },
{ id: 'name', width: { min: 80 } },
{ id: 'value', width: { min: 100 } }
]}
let:root>
<svelte:fragment slot="header" let:root>
<Table.Header.Cell column="type" {root}>Type</Table.Header.Cell>
<Table.Header.Cell column="name" {root}>Name</Table.Header.Cell>
<Table.Header.Cell column="value" {root}>Value</Table.Header.Cell>
</svelte:fragment>
<Table.Row.Base {root}>
<Table.Cell column="type" {root}>CNAME</Table.Cell>
<Table.Cell column="name" {root}>{subdomain}</Table.Cell>
<Table.Cell column="value" {root}>
<InteractiveText
variant="copy"
isVisible
text={$regionalConsoleVariables._APP_DOMAIN_TARGET_CNAME} />
</Table.Cell>
</Table.Row.Base>
</Table.Root>
</div>
Comment on lines +38 to +62
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Critical: overflow: hidden prevents scrolling on mobile devices.

The responsive wrapper uses overflow: hidden, which will clip table content when it exceeds the container width on mobile devices. This defeats the purpose of adding responsive table support, as users won't be able to access clipped content.

🔎 Proposed fix

Update the CSS to enable horizontal scrolling:

 .responsive-table {
-    overflow: hidden;
+    overflow-x: auto;
     width: 100%;
     scrollbar-width: thin;
     position: relative;
 }

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In src/lib/components/domains/cnameTable.svelte around lines 38 to 62 the
responsive wrapper currently uses overflow: hidden which clips table content on
narrow viewports; change the CSS for the .responsive-table wrapper to allow
horizontal scrolling instead (e.g., remove overflow:hidden and use overflow-x:
auto; overflow-y: visible; and add -webkit-overflow-scrolling: touch for smooth
scrolling), optionally add white-space: nowrap or ensure the inner table can
expand so users can scroll to access clipped columns on mobile.

<Layout.Stack gap="s" direction="row" alignItems="center">
<Icon icon={IconInfo} size="s" color="--fgcolor-neutral-secondary" />
<Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
Expand All @@ -69,3 +71,13 @@
</Typography.Text>
</Layout.Stack>
</Layout.Stack>

<style>
/* responsive table container */
.responsive-table {
overflow: hidden;
width: 100%;
scrollbar-width: thin;
position: relative;
}
</style>
74 changes: 44 additions & 30 deletions src/lib/components/domains/recordTable.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,40 +101,44 @@
</Typography.Text>
</Layout.Stack>

<Table.Root
columns={[
{ id: 'type', width: { min: 150 } },
{ id: 'name', width: { min: 80 } },
{ id: 'value', width: { min: 100 } }
]}
let:root>
<svelte:fragment slot="header" let:root>
<Table.Header.Cell column="type" {root}>Type</Table.Header.Cell>
<Table.Header.Cell column="name" {root}>Name</Table.Header.Cell>
<Table.Header.Cell column="value" {root}>Value</Table.Header.Cell>
</svelte:fragment>
<Table.Row.Base {root}>
<Table.Cell column="type" {root}>{variant.toUpperCase()}</Table.Cell>
<Table.Cell column="name" {root}>{subdomain || '@'}</Table.Cell>
<Table.Cell column="value" {root}>
<InteractiveText variant="copy" isVisible text={setTarget()} />
</Table.Cell>
</Table.Row.Base>
{#if $regionalConsoleVariables._APP_DOMAIN_TARGET_CAA}
<div class="responsive-table">
<Table.Root
columns={[
{ id: 'type', width: { min: 150 } },
{ id: 'name', width: { min: 80 } },
{ id: 'value', width: { min: 200 } }
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Reconsider increasing the column width for mobile responsiveness.

Increasing the value column's min width from 100 to 200 makes the table wider and harder to fit on mobile screens. This contradicts the PR's goal of improving mobile responsiveness. Consider keeping the original width or using a responsive approach where the width adapts based on viewport size.

💡 Alternative approaches

Option 1: Revert to the original width:

-{ id: 'value', width: { min: 200 } }
+{ id: 'value', width: { min: 100 } }

Option 2: Use a flexible width without a fixed minimum:

-{ id: 'value', width: { min: 200 } }
+{ id: 'value', width: { min: 80 } }

Option 3: Make long values wrap or truncate with ellipsis on mobile using CSS.

🤖 Prompt for AI Agents 
In src/lib/components/domains/recordTable.svelte around line 109, the value
column's min width was increased from 100 to 200 which harms mobile
responsiveness; revert the min width back to 100 or replace the fixed min with a
responsive approach (use CSS media queries or viewport-based logic to set a
smaller min on narrow screens), or make cell content responsive by allowing
flexible width and applying wrapping/truncation with ellipsis for long values on
mobile so the table fits smaller viewports.

]}
let:root>
<svelte:fragment slot="header" let:root>
<Table.Header.Cell column="type" {root}>Type</Table.Header.Cell>
<Table.Header.Cell column="name" {root}>Name</Table.Header.Cell>
<Table.Header.Cell column="value" {root}>Value</Table.Header.Cell>
</svelte:fragment>

<Table.Row.Base {root}>
<Table.Cell column="type" {root}>
<Layout.Stack gap="s" direction="row" alignItems="center">
<span>CAA</span>
<Badge variant="secondary" size="xs" content="Recommended" />
</Layout.Stack>
</Table.Cell>
<Table.Cell column="name" {root}>@</Table.Cell>
<Table.Cell column="type" {root}>{variant.toUpperCase()}</Table.Cell>
<Table.Cell column="name" {root}>{subdomain || '@'}</Table.Cell>
<Table.Cell column="value" {root}>
<InteractiveText variant="copy" isVisible text={caaText} />
<InteractiveText variant="copy" isVisible text={setTarget()} />
</Table.Cell>
</Table.Row.Base>
{/if}
</Table.Root>

{#if $regionalConsoleVariables._APP_DOMAIN_TARGET_CAA}
<Table.Row.Base {root}>
<Table.Cell column="type" {root}>
<Layout.Stack direction="row" alignItems="center" gap="s">
<span>CAA</span>
<Badge variant="secondary" size="xs" content="Recommended" />
</Layout.Stack>
</Table.Cell>
<Table.Cell column="name" {root}>@</Table.Cell>
<Table.Cell column="value" {root}>
<InteractiveText variant="copy" isVisible text={caaText} />
</Table.Cell>
</Table.Row.Base>
{/if}
</Table.Root>
</div>
Comment on lines +104 to +141
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Critical: overflow: hidden prevents scrolling on mobile devices.

The responsive wrapper uses overflow: hidden, which will clip table content when it exceeds the container width on mobile devices. Combined with the increased column width (line 109), this will make content inaccessible.

🔎 Proposed fix

Update the CSS (lines 180-185) to enable horizontal scrolling:

 .responsive-table {
-    overflow: hidden;
+    overflow-x: auto;
     width: 100%;
     scrollbar-width: thin;
     position: relative;
 }

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In src/lib/components/domains/recordTable.svelte around lines 104 to 141, the
responsive wrapper currently applies overflow: hidden which prevents horizontal
scrolling on narrow/mobile viewports; update the CSS block around lines 180-185
to allow horizontal scrolling instead (e.g., replace overflow: hidden with
overflow-x: auto or overflow: auto) and add touch-friendly scrolling (e.g.,
-webkit-overflow-scrolling: touch) so the table can be scrolled horizontally on
mobile without clipping content.

<Layout.Stack gap="s" direction="row" alignItems="center">
{#if variant === 'cname' && !subdomain}
{#if isCloud}
Expand Down Expand Up @@ -170,3 +174,13 @@
{/if}
</Layout.Stack>
</Layout.Stack>

<style>
/* responsive table container */
.responsive-table {
overflow: hidden;
width: 100%;
scrollbar-width: thin;
position: relative;
}
</style>
101 changes: 56 additions & 45 deletions src/lib/layout/activity.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,57 +49,59 @@
expanded={databasesScreen && !insideSideSheet}
slotSpacing={databasesScreen && !insideSideSheet}>
{#if logs.total}
<Table.Root {columns} let:root>
<svelte:fragment slot="header" let:root>
<Table.Header.Cell column="user" {root}>User</Table.Header.Cell>
<Table.Header.Cell column="event" {root}>Event</Table.Header.Cell>
<Table.Header.Cell column="location" {root}>Location</Table.Header.Cell>
<Table.Header.Cell column="ip" {root}>IP</Table.Header.Cell>
<Table.Header.Cell column="date" {root}>Date</Table.Header.Cell>
</svelte:fragment>
{#each logs.logs as log}
<Table.Row.Base {root}>
<Table.Cell column="user" {root}>
<Layout.Stack direction="row" alignItems="center">
{#if log.userEmail}
{#if log.userName}
<AvatarInitials size="xs" name={log.userName} />
<Trim>{log.userName}</Trim>
<div class="responsive-table">
<Table.Root {columns} let:root>
<svelte:fragment slot="header" let:root>
<Table.Header.Cell column="user" {root}>User</Table.Header.Cell>
<Table.Header.Cell column="event" {root}>Event</Table.Header.Cell>
<Table.Header.Cell column="location" {root}>Location</Table.Header.Cell>
<Table.Header.Cell column="ip" {root}>IP</Table.Header.Cell>
<Table.Header.Cell column="date" {root}>Date</Table.Header.Cell>
</svelte:fragment>
{#each logs.logs as log}
<Table.Row.Base {root}>
<Table.Cell column="user" {root}>
<Layout.Stack direction="row" alignItems="center">
{#if log.userEmail}
{#if log.userName}
<AvatarInitials size="xs" name={log.userName} />
<Trim>{log.userName}</Trim>
{:else}
<AvatarInitials size="xs" name={log.userEmail} />
<Trim>{log.userEmail}</Trim>
{/if}
{:else}
<AvatarInitials size="xs" name={log.userEmail} />
<Trim>{log.userEmail}</Trim>
<div class="avatar is-size-small">
<span class="icon-anonymous" aria-hidden="true"></span>
</div>
<span class="text u-trim">{log.userName ?? 'Anonymous'}</span>
{/if}
{:else}
<div class="avatar is-size-small">
<span class="icon-anonymous" aria-hidden="true"></span>
</div>
<span class="text u-trim">{log.userName ?? 'Anonymous'}</span>
{/if}
</Layout.Stack>
</Table.Cell>
</Layout.Stack>
</Table.Cell>

<Table.Cell column="event" {root}>
{log.event}
</Table.Cell>
<Table.Cell column="event" {root}>
{log.event}
</Table.Cell>

<Table.Cell column="location" {root}>
{#if log.countryCode !== '--'}
{log.countryName}
{:else}
Unknown
{/if}
</Table.Cell>
<Table.Cell column="location" {root}>
{#if log.countryCode !== '--'}
{log.countryName}
{:else}
Unknown
{/if}
</Table.Cell>

<Table.Cell column="ip" {root}>
<InteractiveText variant="copy" text={log.ip} isVisible />
</Table.Cell>
<Table.Cell column="ip" {root}>
<InteractiveText variant="copy" text={log.ip} isVisible />
</Table.Cell>

<Table.Cell column="date" {root}>
<DualTimeView time={log.time} showDatetime />
</Table.Cell>
</Table.Row.Base>
{/each}
</Table.Root>
<Table.Cell column="date" {root}>
<DualTimeView time={log.time} showDatetime />
</Table.Cell>
</Table.Row.Base>
{/each}
</Table.Root>
</div>
Comment on lines +52 to +104
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Critical: overflow: hidden prevents scrolling on mobile devices.

The responsive wrapper uses overflow: hidden, which will clip table content when it exceeds the container width. On mobile devices, users won't be able to scroll to view the IP or Date columns.

🔎 Proposed fix

Update the CSS (lines 133-138) to enable horizontal scrolling:

 .responsive-table {
-    overflow: hidden;
+    overflow-x: auto;
     width: 100%;
     scrollbar-width: thin;
     position: relative;
 }

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In src/lib/layout/activity.svelte around lines 52 to 104, the responsive wrapper
currently uses overflow: hidden which prevents horizontal scrolling on mobile
and clips columns like IP/Date; change the CSS for the .responsive-table wrapper
(lines ~133-138) to allow horizontal scrolling by using overflow-x: auto (or
overflow: auto), add -webkit-overflow-scrolling: touch for smooth mobile
scrolling, and ensure the inner table has a min-width (e.g., min-width: 100% or
a wider fixed/min content width) so columns can overflow and be scrolled into
view.


<PaginationWithLimit
{limit}
Expand All @@ -126,3 +128,12 @@
</Card.Base>
{/if}
</Container>

<style>
.responsive-table {
overflow: hidden;
width: 100%;
scrollbar-width: thin;
position: relative;
}
</style>
Loading