fix: Reduce the size of integration section in footer #54
Conversation
|
@Yash-Atkari is attempting to deploy a commit to the idan lodzki's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughUpgrades Docusaurus package versions to ^3.9.2, refactors footer CSS into a compact layout with tooltips and smaller icons, adjusts Docusaurus config formatting/indentation, and adds a minor whitespace change in a page component. Changes
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
opsimate-docs/src/pages/index.jsx (1)
11-11: Minor inconsistency: trailing blank line differs from other icon components.The other icon components in this file (IntegrationsIcon, AlertsIcon, etc.) don't have a trailing blank line after the closing
</svg>. Consider removing this line for consistency.</svg> - );opsimate-docs/src/css/custom.css (1)
574-583: Clean up redundant comments.The comment block listing removed sections (lines 575-581) and the duplicate "Compact Footer" comment (line 583) could be removed since they don't provide value in the final code and the removed code is tracked in version control.
-/* Remove old integration styles that are no longer needed */ -/* Remove these sections: - - .integration-grid - - .integration-card - - .integration-link - - Old .footer-integrations with grid layout - - Old responsive integrations with labels -*/ - -/* ---------- Compact Footer ---------- */ -
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (4)
opsimate-docs/docusaurus.config.js(1 hunks)opsimate-docs/package.json(2 hunks)opsimate-docs/src/css/custom.css(3 hunks)opsimate-docs/src/pages/index.jsx(1 hunks)
🔇 Additional comments (5)
opsimate-docs/docusaurus.config.js (1)
119-145: LGTM! Formatting adjustments align with compact footer refactor.The indentation changes improve readability and are consistent with the compact footer design. The aria-label attributes are correctly positioned for the tooltip implementation in custom.css.
opsimate-docs/src/css/custom.css (3)
122-177: LGTM! Compact footer foundations well-implemented.The reduced padding, gaps, and font sizes successfully create a more balanced and compact footer layout as intended by the PR objectives. The progressive size reductions maintain visual hierarchy while conserving space.
265-332: LGTM! Footer bottom and Vercel card properly scaled.The compact styling maintains brand visibility while significantly reducing the footer footprint. The Vercel card remains recognizable and functional at the reduced size.
494-572: Tooltip implementation is well-structured; verify overflow behavior on small screens.The tooltip implementation using
::afterand::beforepseudo-elements is lightweight and performant. The use ofaria-labelcontent ensures accessibility. However, tooltips positioned below icons (bottom: -35px) might overflow the viewport on small screens or when icons are near the bottom edge.Test the footer on various screen sizes to ensure tooltips don't cause horizontal scrolling or get cut off. Consider adding:
.integration-item::after, .footer-community-icon-link::after { max-width: 200px; word-wrap: break-word; }Additionally, you could verify tooltip positioning by:
- Loading the site on mobile devices or using browser dev tools
- Hovering over icons near the viewport edges
- Checking for any overflow or clipping issues
opsimate-docs/package.json (1)
20-21: React 19 compatibility and breaking changes verified.Docusaurus 3.9.2 is confirmed compatible with React 19 (support added in v3.7). No breaking changes exist between 3.8.1 and 3.9.2—semver is followed for minor releases. The upgrade is safe.
Important: Docusaurus 3.9+ dropped Node.js 18 support; your project now requires Node >= 20. Verify your development and CI/CD environments meet this requirement before merging.
| /* ===== SIMPLE INTEGRATION ICONS (Compact) ===== */ | ||
| .footer-integrations { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 12px; | ||
| margin-top: 0.5rem; | ||
| gap: 8px; /* Tighter gap */ | ||
| margin-top: 0.25rem; | ||
| flex-wrap: wrap; | ||
| } | ||
|
|
||
| /* Footer bottom / Vercel card remains unchanged (from your original CSS) */ | ||
|
|
||
| /* ---------- Responsive adjustments (navbar + footer icons included) ---------- */ | ||
| @media (max-width: 1024px) { | ||
| .navbar-icon-link, | ||
| .footer-community-icon-link, | ||
| .navbar__items button.clean-btn { | ||
| width: 36px; | ||
| height: 36px; | ||
| } | ||
| .navbar-icon, | ||
| .footer-community-icon { | ||
| width: 20px; | ||
| height: 20px; | ||
| } | ||
| .navbar-icons-container, | ||
| .footer-community-icons { | ||
| gap: 12px; | ||
| } | ||
| .integration-item { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| width: 32px; /* Smaller than community icons */ | ||
| height: 32px; /* Smaller than community icons */ | ||
| border-radius: 4px; /* Smaller radius */ | ||
| transition: all 0.2s ease; | ||
| background-color: transparent; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| /* ---------- Remove old conflicting hidden classes ---------- */ | ||
| /* removed: .footer-icons-container, .footer-community-section, etc. */ | ||
|
|
||
| /* ===== VERCEL CARD - SLEEK RECTANGULAR DESIGN (INCREASED SIZE) ===== */ | ||
| .vercel-card-container { | ||
| .integration-item:hover { | ||
| background-color: rgba(57, 73, 171, 0.3); | ||
| transform: translateY(-1px); | ||
| text-decoration: none; | ||
| display: block; | ||
| } | ||
|
|
||
| .vercel-card { | ||
| .integration-icon-container { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 0.85rem; /* Increased gap */ | ||
| padding: 0.9rem 1.5rem; /* Increased padding */ | ||
| background: #000000; | ||
| border: 1.75px solid #334155; /* Slightly thicker border */ | ||
| border-radius: 7px; /* Slightly larger radius */ | ||
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | ||
| min-width: 175px; /* Increased min-width */ | ||
| box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); /* Enhanced shadow */ | ||
| position: relative; | ||
| overflow: hidden; | ||
| justify-content: center; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .vercel-card::before { | ||
| content: ""; | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| background: linear-gradient( | ||
| 135deg, | ||
| rgba(79, 70, 229, 0.18) 0%, | ||
| /* Slightly stronger gradient */ rgba(0, 0, 0, 0.85) 100% | ||
| ); | ||
| opacity: 0; | ||
| transition: opacity 0.3s ease; | ||
| .integration-icon { | ||
| width: 18px; /* Smaller icons */ | ||
| height: 18px; /* Smaller icons */ | ||
| transition: all 0.2s ease; | ||
| filter: brightness(0) invert(1); | ||
| } | ||
|
|
||
| .vercel-card:hover { | ||
| background: #111827; | ||
| border-color: #4f46e5; | ||
| transform: translateY(-2px); | ||
| box-shadow: 0 6px 25px rgba(79, 70, 229, 0.3); /* Enhanced hover shadow */ | ||
| text-decoration: none; | ||
| .integration-item:hover .integration-icon { | ||
| filter: invert(35%) sepia(100%) saturate(800%) hue-rotate(240deg); | ||
| } | ||
|
|
||
| .vercel-card:hover::before { | ||
| opacity: 1; | ||
| /* Hide the integration names */ | ||
| .integration-name { | ||
| display: none; | ||
| } |
There was a problem hiding this comment.
Address accessibility and touch target size concerns for integration icons.
Two important issues to consider:
-
Accessibility: The integration names are hidden with
display: none(line 227). Whilearia-labelattributes provide tooltip text, the hidden semantic HTML content may impact SEO and some assistive technologies. Consider usingvisually-hiddenclass orcliptechnique instead ofdisplay: noneto maintain content in the DOM. -
Touch target size: The 32px × 32px buttons (line 192-193) with 18px icons (line 215-216) fall below the WCAG 2.1 Level AA recommendation of 44×44px minimum touch targets for mobile usability. This becomes more problematic on smaller screens where icons shrink to 28px × 28px (lines 468-469).
Consider these adjustments:
.integration-item {
display: flex;
align-items: center;
justify-content: center;
- width: 32px;
- height: 32px;
+ width: 44px; /* WCAG minimum */
+ height: 44px; /* WCAG minimum */
border-radius: 4px;
transition: all 0.2s ease;
background-color: transparent;
text-decoration: none;
}For the hidden text, add a visually-hidden utility class:
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}Then in the HTML (docusaurus.config.js), replace display: none usage with this class.
|
I’ve resolved the merge conflicts - please review and merge the PR when you can. |
|
@Yash-Atkari please add a screenshot |
|
Ok just a second |
|
Here it is 
|
|
@Yash-Atkari nice! |
2 participants
Problem: The integrations section in the footer appeared too large and unbalanced compared to other footer elements, taking up unnecessary space and disrupting the visual harmony.
Solution Implemented:
Reduced Integration Size: Transformed bulky integration blocks into compact, simple icons similar to community icons
Added Hover Tooltips: Implemented clean tooltips that display integration names on hover for better UX without cluttering the design
Improved Responsiveness: Made the footer more compact across all screen sizes with consistent spacing and proportional scaling
Maintained Balance: Ensured all footer sections now have equal visual weight and proper alignment
Summary by CodeRabbit
New Features
Style
Chores