Fix internal hosting

[lyubov-voloshko]

Summary by CodeRabbit

• Bug Fixes

  • Fixed null-safety handling for connection lists
  • Enhanced hosted database dialog behavior to prevent accidental dismissal

• Style

  • Adjusted spacing for action button controls
  • Redesigned mobile interface for upgrade and plans page with sticky headers and improved layout spacing
  • Improved plan card and table styling for better mobile display

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 816b7a01-b5b5-4d3c-8246-a5645fd34710

📥 Commits

Reviewing files that changed from the base of the PR and between 357d7cc and fd0720a.

📒 Files selected for processing (4)

• frontend/src/app/components/connections-list/own-connections/own-connections.component.css
• frontend/src/app/components/connections-list/own-connections/own-connections.component.ts
• frontend/src/app/components/upgrade/upgrade.component.css
• frontend/src/app/components/upgrade/upgrade.component.html

---

📝 Walkthrough

Walkthrough

The pull request updates styling and logic across two components: adjusting FAB container spacing, implementing null-safe connection length calculations with lifecycle handling and dialog configuration changes in the connections component, and introducing comprehensive mobile-responsive layouts for the upgrade component's header, plans display, and data table.

Changes

Cohort / File(s)	Summary
Own Connections Component frontend/src/app/components/connections-list/own-connections/own-connections.component.css, frontend/src/app/components/connections-list/own-connections/own-connections.component.ts	Increased FAB actions margin-top from 20px to 52px. Enhanced TypeScript logic with null-safe connection length fallback (this.connections?.length || 3), added ngOnChanges lifecycle handler to recalculate displayedCardCount on input changes, and set disableClose: true on hosted database success dialog.
Upgrade Component frontend/src/app/components/upgrade/upgrade.component.css, frontend/src/app/components/upgrade/upgrade.component.html	Extensive mobile responsive redesign: converted .current-plan-banner and .header to row/sticky layouts with adjusted spacing, hid desktop elements on mobile, restructured .plans sizing, and transformed .plansTable into a 3-column grid with reworked cell styling. Added "Popular" chip alongside "Recommended", wrapped plan controls in dedicated action div, and refactored table cell rendering with conditional titles and icon logic.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 With spacing nudged and margins tweaked,
Mobile layouts sleek and sleek,
Null-safe bounds and dialogs tight,
Plans cascade in responsive light! ✨
From desktop wide to thumb-screen small,
This rabbit hops for changes all!

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix-internal-hosting

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Pull request overview

This PR updates the frontend UI/UX around plan upgrades and the connections list, likely to improve hosted/internal hosting flows and mobile presentation.

Changes:

• Refactors the Upgrade page markup and styles for improved mobile layout (sticky plan header, mobile-only badges, responsive tables).
• Adjusts OwnConnectionsComponent card count logic when UI settings / inputs change.
• Prevents accidental closing of the hosted database success dialog and tweaks FAB spacing.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File	Description
frontend/src/app/components/upgrade/upgrade.component.html	Adds mobile-only badge and restructures header/table cell rendering for responsive layout.
frontend/src/app/components/upgrade/upgrade.component.css	Adds extensive mobile styling (sticky header, responsive table layout).
frontend/src/app/components/connections-list/own-connections/own-connections.component.ts	Updates displayed-card-count logic on settings load and input changes; makes hosted DB success dialog non-dismissable via backdrop/ESC.
frontend/src/app/components/connections-list/own-connections/own-connections.component.css	Adjusts layout spacing for FAB actions.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

(this.connections?.length || 3) treats an empty connections array (length === 0) as falsy and resets displayedCardCount back to 3 when the list is not collapsed. This can cause incorrect state (and potential UI flicker) for users with zero connections. Use a nullish check instead (e.g., this.connections?.length ?? 0 or ?? 3 depending on the intended default) so that 0 is preserved.

Suggested change

	this.displayedCardCount = this.connectionsListCollapsed ? 3 : (this.connections?.length || 3);
	this.displayedCardCount = this.connectionsListCollapsed ? 3 : (this.connections?.length ?? 3);