feat(app): global incident banner driven by status.drips.network#1928
Merged
Conversation
Adds a dismissable, fixed banner at the top of every view that shows the current active incident from status.drips.network (incidents.active), with a "View status" link that's never truncated and a title that ellipsises. Each sub-app header/content offsets below it via a shared --incident-banner-offset CSS var (0 unless an incident is showing), so layouts only shift during an incident: - LP floating-pill header + blog/solutions/legal content padding - /app fixed header, page/sidenav clearances (incl. read-only-banner combos), and the fixed search bar - /wave shell header, content/nav heights, and sticky sub-headers (settings/admin tabs, org/user profile cards, flows), plus the issues view list/sidebar heights and the applications filter bar (CSS top + the JS stickiness threshold now reads the resolved top) Also fixes a pre-existing horizontal overflow in LatestNewsSection's compact grid on narrow viewports (minmax(min(24rem, 100%), 1fr)).
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new global incident banner component that appears at the top of all pages when https://status.drips.network/status.json reports an active incident, and introduces a shared --incident-banner-offset CSS variable so existing layouts can consistently shift their fixed/sticky UI down when the banner is visible.
Changes:
- Introduces
IncidentBannerthat fetches status JSON on mount, shows a single active incident, and persists per-incident dismissal via the existingdismissablesstore. - Adds global CSS variables for fixed banner height (desktop/mobile) and a conditional offset toggled via an
html.incident-banner-visibleclass. - Updates multiple
/app,/wave, and landing-page layouts to incorporate the offset intotop/padding/min-heightcalculations; also fixes a narrow-viewport overflow in the app “Latest news” compact grid.
Reviewed changes
Copilot reviewed 19 out of 19 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| src/styles/app.css | Defines incident banner CSS vars and the html.incident-banner-visible offset toggle. |
| src/routes/(pages)/wave/(flows)/+layout.svelte | Offsets flow layout content from the fixed incident banner. |
| src/routes/(pages)/wave/(base-layout)/users/[userId]/+page.svelte | Adjusts sticky profile card top to include incident offset. |
| src/routes/(pages)/wave/(base-layout)/settings/+layout.svelte | Adjusts sticky settings tabs top (desktop + responsive) to include incident offset. |
| src/routes/(pages)/wave/(base-layout)/orgs/[orgId]/+page.svelte | Adjusts sticky org info top to include incident offset. |
| src/routes/(pages)/wave/(base-layout)/admin/repos/+layout.svelte | Adjusts sticky admin repos tabs top to include incident offset. |
| src/routes/(pages)/wave/(base-layout)/+layout.svelte | Shifts fixed header, layout margins, and sticky sidenav sizing by incident offset. |
| src/routes/(pages)/app/(app)/components/latest-news-section.svelte | Prevents compact grid from forcing horizontal overflow on narrow viewports. |
| src/routes/(pages)/app/(app)/+layout.svelte | Shifts fixed app header and page/sidenav padding by incident offset (incl. read-only banner cases). |
| src/routes/(pages)/+layout.svelte | Mounts the global IncidentBanner for all pages. |
| src/routes/(pages)/(lp)/solutions/+layout.svelte | Adds top padding offset to keep landing layout below incident banner. |
| src/routes/(pages)/(lp)/legal/+layout.svelte | Adds top padding offset to keep legal layout below incident banner. |
| src/routes/(pages)/(lp)/blog/+layout.svelte | Adds responsive top padding offset to keep blog layout below incident banner. |
| src/lib/components/wave/issues-page/single-issue-page.svelte | Adjusts sticky sidebar top and height constraints by incident offset. |
| src/lib/components/wave/issues-page/issues-page.svelte | Adjusts sticky issue list top and height constraints by incident offset. |
| src/lib/components/wave/issues-page/components/applications-filter-bar.svelte | Reads resolved computed top for sticky threshold + adjusts sticky top by incident offset. |
| src/lib/components/lp-header/lp-header.svelte | Offsets landing-page header top by incident offset. |
| src/lib/components/incident-banner/incident-banner.svelte | New component: fetches status JSON, renders single incident banner, persists dismissal, toggles root class. |
| src/lib/components/header/header.svelte | Offsets fixed search bar top by incident offset. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Adds a global, dismissable incident banner shown at the top of every view of the app. On mount it fetches
status.drips.network/status.json, readsincidents.active, and renders the current active incident (single banner) in red, with a "View status" link. If the status page is unreachable or there's no active incident, nothing renders.dismissablesstore, keyed per-incident, so dismissing one incident won't suppress a future one.Layout offsets
A shared
--incident-banner-offsetCSS var (set on<html>only while an incident is showing, otherwise0px) lets each sub-app's header/content shift below the banner. Nothing moves in the normal (no-incident) case.top, and blog/solutions/legal content top-padding.top, page & sidenav clearances (including the read-only-banner combinations), and the fixed search bar.topinstead of a hardcoded6.5rem, so the "hide content above" logic stays correct with the banner up.Drive-by fix
Fixes a pre-existing horizontal overflow in
LatestNewsSection's compact grid on narrow viewports (minmax(min(24rem, 100%), 1fr)), which also affected the/appexplore page.Notes
svelte-check, ESLint, and Prettier all pass. The banner is best-effort and fails silently if the status endpoint is down.