Fix: show list page mobile view

[santipalenque]

https://app.clickup.com/t/9014802374/86bb44v82

Summary by CodeRabbit

• New Features

  • Improved Summit directory controls with clearer search, filtering, and add-summit placement.
  • Summit totals now appear directly in the page header.

• Style

  • Improved mobile spacing for breadcrumbs and page content.
  • Fixed the mobile header while keeping page content visible beneath it.
  • Simplified Summit directory table and action styling.

• Bug Fixes

  • Runtime errors on the Summit directory now surface instead of being replaced by a custom error panel.

[coderabbitai]

📝 Walkthrough

Walkthrough

The Summit directory page layout, header, table configuration, and render error behavior were updated. Mobile styles now adjust spacing and keep the header fixed while offsetting page content.

Changes

Summit directory UI

Layer / File(s)	Summary
Directory render flow src/pages/summits/summit-directory-page.js	Moves callbacks outside the prior try block, removes the custom error fallback, includes the summit count in the header, reorganizes controls, and removes the ID column width.
Directory layout styles src/styles/summit-directory-page.less	Removes the Summit table margin, action alignment, and button spacing rules.

Responsive layout

Layer / File(s)	Summary
Mobile spacing and fixed header src/styles/general.less, src/styles/landing.css	Adds mobile breadcrumb spacing, changes container horizontal padding, fixes the mobile header, and adds body offset padding.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

• fntechgit/summit-admin#896: Modifies the same Summit directory component and its custom render error behavior.

Suggested reviewers: smarcet

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title matches the main goal: fixing the list/directory page mobile view.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ 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/show-list-page-mobile-view

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

src/styles/landing.css

Parsing error: Missing semicolon. (1:4)

---

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

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/styles/landing.css (1)

98-109: 🎯 Functional Correctness | 🔵 Trivial

Global fixed-header rule risks broader impact than the directory page, and the offset is a fragile hardcoded value.

.header and body are both unscoped, global selectors, so this fixed-position + compensating padding applies to every page at ≤768px, not just the summit directory page — verify no other mobile page already manages its own header offset or lacks .header entirely (which would leave an unwanted 64px gap at the top). Also, padding-top: 64px must exactly match the real rendered height of .header; any drift (font scaling, wrapped text, etc.) causes either a gap or content hidden under the fixed bar.

Separately, z-index: 1000 sits below MUI's own appBar (1100), drawer (1200), and modal (1300) levels — if any MUI AppBar/Drawer/Modal renders alongside .header on mobile, this header could land underneath them.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/styles/landing.css` around lines 98 - 109, Scope the fixed-header styles
in .header and the compensating top offset to the summit directory page instead
of applying global body rules, and confirm other mobile pages are unaffected.
Replace the hardcoded body padding with an offset derived from the header’s
rendered height so content remains aligned when the header size changes. Update
.header stacking to remain above the intended page content while preserving the
established MUI AppBar, Drawer, and Modal layering hierarchy.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/styles/general.less`:
- Around line 223-230: Update the mobile rule inside the max-width 768px media
query to target .breadcrumbs-wrapper:not(.container) with matching specificity,
ensuring its mobile padding overrides the desktop declaration while preserving
the existing generic .breadcrumbs-wrapper behavior.

---

Nitpick comments:
In `@src/styles/landing.css`:
- Around line 98-109: Scope the fixed-header styles in .header and the
compensating top offset to the summit directory page instead of applying global
body rules, and confirm other mobile pages are unaffected. Replace the hardcoded
body padding with an offset derived from the header’s rendered height so content
remains aligned when the header size changes. Update .header stacking to remain
above the intended page content while preserving the established MUI AppBar,
Drawer, and Modal layering hierarchy.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 5060d56d-e289-4de8-b54e-88d233bec0a1

📥 Commits

Reviewing files that changed from the base of the PR and between 53b15bf and fe1affd.

📒 Files selected for processing (4)

• src/pages/summits/summit-directory-page.js
• src/styles/general.less
• src/styles/landing.css
• src/styles/summit-directory-page.less

💤 Files with no reviewable changes (1)

• src/styles/summit-directory-page.less

[coderabbitai]

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Mobile breadcrumb override won't apply to the .breadcrumbs-wrapper:not(.container) variant.

.breadcrumbs-wrapper:not(.container) (Lines 78-81) has specificity (0,2,0) — the :not() argument counts toward specificity — while the new mobile rule .breadcrumbs-wrapper { padding: 10px 16px; } is only (0,1,0). Since specificity beats media-query/source-order when unequal, the desktop padding: 10px 12px; margin: 0 16px 20px 16px; will keep winning on mobile for any breadcrumb wrapper without the .container class — the intended mobile padding never applies to that variant.

🐛 Proposed fix: mirror the selector in the media query

 `@media` only screen and (max-width: 768px) {
   .breadcrumbs-wrapper {
     padding: 10px 16px;
   }
+
+  .breadcrumbs-wrapper:not(.container) {
+    padding: 10px 16px;
+  }
 }

📝 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

	/* MOBILE SPECIFIC */
	@media only screen and (max-width: 768px) {
	.breadcrumbs-wrapper {
	padding: 10px 16px;
	}
	}
	/* MOBILE SPECIFIC */
	`@media` only screen and (max-width: 768px) {
	.breadcrumbs-wrapper {
	padding: 10px 16px;
	}
	.breadcrumbs-wrapper:not(.container) {
	padding: 10px 16px;
	}
	}

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/styles/general.less` around lines 223 - 230, Update the mobile rule
inside the max-width 768px media query to target
.breadcrumbs-wrapper:not(.container) with matching specificity, ensuring its
mobile padding overrides the desktop declaration while preserving the existing
generic .breadcrumbs-wrapper behavior.