Overhaul CSS for responsive layouts (320px to 2560px) #18

New Issue

2026-02-25T16:05:15+01:00

libretech commented

2026-02-25 16:05:15 +01:00

Summary

Rewrite the CSS layout system to support screen widths from 320px to 2560px.

Implementation Tasks

Audit current CSS for fixed-width assumptions
Define breakpoints (e.g., 320, 768, 1024, 1440, 2560)
Implement mobile layout (stacked sidebar/editor)
Implement tablet layout (collapsible sidebar)
Implement desktop layout (side-by-side)
Implement ultrawide layout
Test on real devices or emulators

Acceptance Criteria

No horizontal scrolling at any supported viewport width
Sidebar is accessible via toggle on mobile
Editor is usable at 320px width
Content area uses available space effectively at 2560px

## Summary Rewrite the CSS layout system to support screen widths from 320px to 2560px. ## Implementation Tasks - [x] Audit current CSS for fixed-width assumptions - [x] Define breakpoints (e.g., 320, 768, 1024, 1440, 2560) - [x] Implement mobile layout (stacked sidebar/editor) - [x] Implement tablet layout (collapsible sidebar) - [x] Implement desktop layout (side-by-side) - [x] Implement ultrawide layout - [ ] Test on real devices or emulators ## Acceptance Criteria - [x] No horizontal scrolling at any supported viewport width - [ ] Sidebar is accessible via toggle on mobile - [ ] Editor is usable at 320px width - [x] Content area uses available space effectively at 2560px

libretech added the phase-3 label 2026-02-25 16:05:15 +01:00

libretech referenced this issue

2026-02-28 09:33:59 +01:00

Epic: Phase 3 — Mobile / PWA #17

~~libretech referenced this issue 2026-02-28 20:24:40 +01:00~~

Replace mouse events with pointer events for mobile touch support #20

libretech added the task label 2026-02-28 20:25:53 +01:00

libretech changed title from ~~Responsive CSS overhaul~~ to Overhaul CSS for responsive mobile-to-desktop layouts

2026-02-28 20:25:53 +01:00

libretech changed title from ~~Overhaul CSS for responsive mobile-to-desktop layouts~~ to Overhaul CSS for responsive layouts (320px to 2560px)

2026-02-28 21:14:09 +01:00

~~libretech referenced this issue 2026-02-28 21:15:46 +01:00~~

Create public landing page at librenot.es with feature overview and CTAs #16

~~libretech referenced this issue 2026-02-28 21:16:20 +01:00~~

Add PWA support: manifest, service worker, and install prompt #19

libretech added the frontend label 2026-03-01 20:32:40 +01:00

libretech closed this issue

2026-04-28 22:29:08 +02:00

libretech referenced this issue from a commit

2026-05-02 14:50:46 +02:00

Overhaul CSS for 320px–2560px viewports

Sign in to join this conversation.