UI Enhancement / Fix for Frontpage #240

New Issue

MrUnknownDE · 2026-04-05T16:17:10+02:00

MrUnknownDE commented

2026-04-05 16:17:10 +02:00

Originally created by @jlar0che on 9/7/2025

First off, thank you for Open Archiver—really enjoying the project!

On the frontend, the top bar and main content render flush against the left and right edges of the browser window. This makes text and controls feel cramped. Adding modest horizontal padding would improve readability and overall polish.

Current Behavior:

Top bar items and main content sit directly against the viewport edges (no left/right padding).

Screenshots

Before (no padding):

After (with padding):

Details (how I made the changes):

Expected / Desired Behavior

Add consistent horizontal padding on both the top bar and main content areas so text and UI elements don’t touch the screen edges.
Padding can be responsive (e.g., larger on desktop, smaller on mobile).

Why this helps

Improves legibility by preventing edge-to-edge text.
Creates visual balance and affordance for clickable items.
Aligns with common UI patterns and helps with small-target miss-clicks near the edge.

*Originally created by @jlar0che on 9/7/2025* First off, thank you for Open Archiver—really enjoying the project! On the frontend, the top bar and main content render flush against the left and right edges of the browser window. This makes text and controls feel cramped. Adding modest horizontal padding would improve readability and overall polish. **Current Behavior:** - Top bar items and main content sit directly against the viewport edges (no left/right padding). **Screenshots** Before (no padding): <img width="1920" height="1020" alt="Image" src="https://github.com/user-attachments/assets/839d33da-9bac-490e-a41f-d70f5f27878c" /> After (with padding): <img width="1920" height="1020" alt="Image" src="https://github.com/user-attachments/assets/93431ed0-1a61-4483-b8c5-4bd311b63ae4" /> Details (how I made the changes): ![Image](https://github.com/user-attachments/assets/8f061a14-113f-49be-b343-fcaf349acdac) ![Image](https://github.com/user-attachments/assets/2fb818c3-2d85-422b-9d05-0fbaa24bd84e) **Expected / Desired Behavior** - Add consistent horizontal padding on both the top bar and main content areas so text and UI elements don’t touch the screen edges. - Padding can be responsive (e.g., larger on desktop, smaller on mobile). **Why this helps** - Improves legibility by preventing edge-to-edge text. - Creates visual balance and affordance for clickable items. - Aligns with common UI patterns and helps with small-target miss-clicks near the edge.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/OpenArchiver#240