Skip to content
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

fix: Scrolling issues on deployment page #254

Closed
wants to merge 1 commit into from
Closed

fix: Scrolling issues on deployment page #254

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion ...rvice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/TableDeployments.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@ const DeploymentTable: React.FC<{
>;
}> = ({ systemSlug, deployments, environments, workspace }) => {
return (
<div className="w-full overflow-x-auto">
<div className="scrollbar-thin scrollbar-thumb-neutral-700 scrollbar-track-neutral-800 w-full overflow-x-auto">
<table className="w-full min-w-max border-separate border-spacing-0">
<thead>
<tr>
Expand Down
20 changes: 16 additions & 4 deletions ...app)/systems/[systemSlug]/deployments/[deploymentSlug]/releases/DeploymentPageContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,11 @@ export const DeploymentPageContent: React.FC<DeploymentPageContentProps> = ({
const loading = releases.isLoading;
const router = useRouter();

const numEnvironmentBlocks = Math.min(3, environments.length);

return (
<div>
<div className="h-full text-sm">
<div className="text-sm">
<div className="flex items-center gap-4 border-b border-neutral-800 p-1 px-2">
<div className="flex flex-grow items-center gap-2">
<ReleaseConditionDialog
Expand Down Expand Up @@ -136,8 +138,8 @@ export const DeploymentPageContent: React.FC<DeploymentPageContentProps> = ({
</div>
)}
{!loading && releases.data && (
<div className="flex flex-col">
<Table>
<div className="scrollbar-none flex w-[calc(100vw-267px)] flex-col">
<Table className="scrollbar-none">
<TableHeader>
<TableRow className="hover:bg-transparent">
<TableHead className="sticky left-0 z-10 min-w-[500px] p-0">
Expand Down Expand Up @@ -178,7 +180,17 @@ export const DeploymentPageContent: React.FC<DeploymentPageContentProps> = ({
"border-b",
)}
>
<div className="flex h-[60px] w-full items-center gap-2 px-4 backdrop-blur-sm">
<div
className={cn(
"flex h-[60px] items-center gap-2 overflow-auto px-4 backdrop-blur-sm",
numEnvironmentBlocks === 3 &&
"max-w-[calc(100vw-256px-737px)]",
numEnvironmentBlocks === 2 &&
"max-w-[calc(100vw-256px-491px)]",
numEnvironmentBlocks === 1 &&
"max-w-[calc(100vw-256px-246px)]",
)}
Comment on lines +183 to +192
Copy link
Contributor

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Consider extracting width calculations into constants

The max-width calculations use magic numbers that make maintenance difficult. Consider extracting these values into named constants for better maintainability:

+ const SIDEBAR_WIDTH = 256;
+ const ENVIRONMENT_BLOCK_WIDTH = 246;
+ 
  <div
    className={cn(
      "flex h-[60px] items-center gap-2 overflow-auto px-4 backdrop-blur-sm",
-     numEnvironmentBlocks === 3 && "max-w-[calc(100vw-256px-737px)]",
-     numEnvironmentBlocks === 2 && "max-w-[calc(100vw-256px-491px)]",
-     numEnvironmentBlocks === 1 && "max-w-[calc(100vw-256px-246px)]",
+     numEnvironmentBlocks === 3 && `max-w-[calc(100vw-${SIDEBAR_WIDTH}px-${ENVIRONMENT_BLOCK_WIDTH * 3}px)]`,
+     numEnvironmentBlocks === 2 && `max-w-[calc(100vw-${SIDEBAR_WIDTH}px-${ENVIRONMENT_BLOCK_WIDTH * 2}px)]`,
+     numEnvironmentBlocks === 1 && `max-w-[calc(100vw-${SIDEBAR_WIDTH}px-${ENVIRONMENT_BLOCK_WIDTH}px)]`,
    )}
  >

Also, consider adding a comment explaining how these width calculations were derived.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div
className={cn(
"flex h-[60px] items-center gap-2 overflow-auto px-4 backdrop-blur-sm",
numEnvironmentBlocks === 3 &&
"max-w-[calc(100vw-256px-737px)]",
numEnvironmentBlocks === 2 &&
"max-w-[calc(100vw-256px-491px)]",
numEnvironmentBlocks === 1 &&
"max-w-[calc(100vw-256px-246px)]",
)}
const SIDEBAR_WIDTH = 256;
const ENVIRONMENT_BLOCK_WIDTH = 246;
<div
className={cn(
"flex h-[60px] items-center gap-2 overflow-auto px-4 backdrop-blur-sm",
numEnvironmentBlocks === 3 &&
`max-w-[calc(100vw-${SIDEBAR_WIDTH}px-${ENVIRONMENT_BLOCK_WIDTH * 3}px)]`,
numEnvironmentBlocks === 2 &&
`max-w-[calc(100vw-${SIDEBAR_WIDTH}px-${ENVIRONMENT_BLOCK_WIDTH * 2}px)]`,
numEnvironmentBlocks === 1 &&
`max-w-[calc(100vw-${SIDEBAR_WIDTH}px-${ENVIRONMENT_BLOCK_WIDTH}px)]`,
)}

>
<span className="truncate">{release.name}</span>{" "}
<Badge
variant="secondary"
Expand Down
2 changes: 1 addition & 1 deletion apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default async function SystemDeploymentsPage({
{deployments.length === 0 ? (
<DeploymentGettingStarted systemId={system.id} />
) : (
<div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 container mx-auto h-[calc(100vh-40px)] overflow-auto p-8">
<div className="scrollbar-thin scrollbar-thumb-neutral-800 scrollbar-track-neutral-900 container mx-auto h-[calc(100%-49px)] overflow-auto p-8">
Copy link
Contributor

Choose a reason for hiding this comment

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

💡 Codebase verification

Height calculation change needs to be consistent across similar components

The codebase shows inconsistent usage of height calculations, with most components using viewport-based (100vh) calculations while only a few use percentage-based (100%). This change in the deployments page appears to be part of a gradual transition, but similar components still use viewport-based heights:

  • apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/environments/page.tsx uses h-[calc(100vh-53px)]
  • apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/deployments/[deploymentSlug]/layout.tsx uses h-[calc(100vh-53px-49px)]
  • apps/webservice/src/app/[workspaceSlug]/(app)/systems/[systemSlug]/runbooks/[runbookId]/layout.tsx uses h-[calc(100vh-53px-49px)]

For consistent behavior across the application, similar components should follow the same height calculation approach. Consider updating related system components to use percentage-based calculations if this new approach proves more reliable.

🔗 Analysis chain

Verify scrollbar behavior across different viewport sizes

The change from viewport-based (100vh) to percentage-based (100%) height calculation could affect the scrolling behavior differently on various screen sizes. While this change likely fixes the immediate scrolling issues, we should ensure it works well across different viewport sizes and zoom levels.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check for other viewport-dependent height calculations that might need similar updates
rg "h-\[calc\(100vh" --type tsx

Length of output: 61

Script:

#!/bin/bash
# Check for other viewport-dependent height calculations that might need similar updates
# Using ripgrep without file type restriction since tsx extension might not be recognized
rg "h-\[calc\(100vh"

# Also check for percentage-based height calculations for comparison
rg "h-\[calc\(100%"

Length of output: 4697

<DeploymentTable
deployments={deployments}
environments={environments}
Expand Down
Loading