starred/karakeep

Fork 0

mirror of https://github.com/karakeep-app/karakeep.git synced 2026-04-25 16:06:04 +03:00

[PR #2305] fix: improve layout and responsiveness across various components #2058

New issue

Open

opened 2026-03-02 12:00:23 +03:00 by kerem · 0 comments

kerem commented

2026-03-02 12:00:23 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/karakeep-app/karakeep/pull/2305
Author: @myselfprincee
Created: 12/25/2025
Status: 🔄 Open

Base: main ← Head: fix/alignment_issues_on_diff_screen_sizes

📝 Commits (10+)

cdceff2 fix: improve layout and responsiveness across various components
cbace0e Remove max-w class from IconComponent
776ba2f Remove unnecessary "justify-center" from TabsContent
332c90b Revert: className changes in DialogContent.
291b091 Adjust Tabs component width in BookmarkPreview
da7b9dd fix: layout issues
fe7036d fix: scroll-area lint fix
b1e7836 Merge branch 'fix/alignment_issues_on_diff_screen_sizes' of https://github.com/myselfprincee/karakeep into fix/alignment_issues_on_diff_screen_sizes
f8cea77 Refactor BookmarkMarkdownComponent structure
dbe6eed fix: center Markdown Readonly contents.

📊 Changes

10 files changed (+34 additions, -27 deletions)

View changed files

📝 apps/web/app/dashboard/@modal/(.)preview/[bookmarkId]/page.tsx (+1 -1)
📝 apps/web/components/dashboard/bookmarks/BookmarkMarkdownComponent.tsx (+1 -0)
📝 apps/web/components/dashboard/bookmarks/BookmarkedTextEditor.tsx (+1 -1)
📝 apps/web/components/dashboard/lists/AllListsView.tsx (+3 -3)
📝 apps/web/components/dashboard/preview/BookmarkPreview.tsx (+2 -2)
📝 apps/web/components/dashboard/preview/TextContentSection.tsx (+1 -0)
📝 apps/web/components/ui/dialog.tsx (+2 -2)
📝 apps/web/components/ui/markdown/markdown-readonly.tsx (+4 -1)
📝 apps/web/components/ui/markdown/plugins/toolbar-plugin.tsx (+18 -16)
📝 apps/web/components/ui/tabs.tsx (+1 -1)

📄 Description

This Pull Request resolves multiple layout and alignment inconsistencies across the Karakeep web interface, with a focus on responsive behavior across screen sizes.

Below are visual comparisons demonstrating the improvements.

Before vs After (Component-level)

Before

After

Before vs After

Before

After

Before vs After (Desktop Layout)

Before

After

Before vs After (on small screens)

Before

After

and more.

Summary of Improvements

Consistent vertical and horizontal alignment
Reduced layout breakage across breakpoints
Improved visual balance without altering component intent
More predictable spacing on large and small screens alike

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/karakeep-app/karakeep/pull/2305 **Author:** [@myselfprincee](https://github.com/myselfprincee) **Created:** 12/25/2025 **Status:** 🔄 Open **Base:** `main` ← **Head:** `fix/alignment_issues_on_diff_screen_sizes` --- ### 📝 Commits (10+) - [`cdceff2`](https://github.com/karakeep-app/karakeep/commit/cdceff229f3d9a96655d7c7f3b2ed3be6dd0a138) fix: improve layout and responsiveness across various components - [`cbace0e`](https://github.com/karakeep-app/karakeep/commit/cbace0ee3748214101d89174441f705f0dac2aa3) Remove max-w class from IconComponent - [`776ba2f`](https://github.com/karakeep-app/karakeep/commit/776ba2fa6d812b3810478794399d81ba21495d61) Remove unnecessary "justify-center" from TabsContent - [`332c90b`](https://github.com/karakeep-app/karakeep/commit/332c90b78f9012d054982005cd61d3bfccb45d1b) Revert: className changes in DialogContent. - [`291b091`](https://github.com/karakeep-app/karakeep/commit/291b09110570cc83787dc4b2d92689c547027b19) Adjust Tabs component width in BookmarkPreview - [`da7b9dd`](https://github.com/karakeep-app/karakeep/commit/da7b9dd6c29ed4c560519052be57000209057f09) fix: layout issues - [`fe7036d`](https://github.com/karakeep-app/karakeep/commit/fe7036d65ff54c97b454b1812b86f703707e2b54) fix: scroll-area lint fix - [`b1e7836`](https://github.com/karakeep-app/karakeep/commit/b1e783693ecc1d41cc4b74036e1db1d347da8908) Merge branch 'fix/alignment_issues_on_diff_screen_sizes' of https://github.com/myselfprincee/karakeep into fix/alignment_issues_on_diff_screen_sizes - [`f8cea77`](https://github.com/karakeep-app/karakeep/commit/f8cea771b8341c8623c2cf66d417752a4dff2f2d) Refactor BookmarkMarkdownComponent structure - [`dbe6eed`](https://github.com/karakeep-app/karakeep/commit/dbe6eedac727e9d7afb31605ee5891a445d919fd) fix: center Markdown Readonly contents. ### 📊 Changes **10 files changed** (+34 additions, -27 deletions) <details> <summary>View changed files</summary> 📝 `apps/web/app/dashboard/@modal/(.)preview/[bookmarkId]/page.tsx` (+1 -1) 📝 `apps/web/components/dashboard/bookmarks/BookmarkMarkdownComponent.tsx` (+1 -0) 📝 `apps/web/components/dashboard/bookmarks/BookmarkedTextEditor.tsx` (+1 -1) 📝 `apps/web/components/dashboard/lists/AllListsView.tsx` (+3 -3) 📝 `apps/web/components/dashboard/preview/BookmarkPreview.tsx` (+2 -2) 📝 `apps/web/components/dashboard/preview/TextContentSection.tsx` (+1 -0) 📝 `apps/web/components/ui/dialog.tsx` (+2 -2) 📝 `apps/web/components/ui/markdown/markdown-readonly.tsx` (+4 -1) 📝 `apps/web/components/ui/markdown/plugins/toolbar-plugin.tsx` (+18 -16) 📝 `apps/web/components/ui/tabs.tsx` (+1 -1) </details> ### 📄 Description This Pull Request resolves multiple **layout and alignment inconsistencies** across the Karakeep web interface, with a focus on **responsive behavior across screen sizes**. Below are visual comparisons demonstrating the improvements. --- ## Before vs After (Component-level) <div style="display:flex; gap:24px; align-items:flex-start;"> <div style="text-align:center;"> <strong>Before</strong><br/> <img width="220" src="https://github.com/user-attachments/assets/1f8361aa-decc-4e17-9115-55db13f0977b" /> </div> <div style="text-align:center;"> <strong>After</strong><br/> <img width="220" src="https://github.com/user-attachments/assets/394a8470-2f09-417a-ac7a-ac88dbbbaea9" /> </div> </div> --- ## Before vs After **Before** <img width="360" src="https://github.com/user-attachments/assets/74619798-d4d9-4c75-8b9e-2dcef6044ab2" /> **After** <img width="360" src="https://github.com/user-attachments/assets/951ee7fa-d11a-41e9-8ee7-c74bd64efab5" /> --- ## Before vs After (Desktop Layout) **Before** <img width="720" src="https://github.com/user-attachments/assets/c3c96c95-43e2-416a-9366-d7e2c890046a" /> **After** <img width="720" src="https://github.com/user-attachments/assets/21f86bac-2625-4cf7-9a2a-b78bd99632f6" /> --- ## Before vs After (on small screens) **Before** <img width="420" src="https://github.com/user-attachments/assets/e2d3fb51-cf02-47d7-8275-3e74ce6a3496" /> **After** <img width="420" src="https://github.com/user-attachments/assets/37b1c6cb-9dcb-4df6-bf2b-0eab39dca3a0" /> --- and more. ### Summary of Improvements - Consistent vertical and horizontal alignment - Reduced layout breakage across breakpoints - Improved visual balance without altering component intent - More predictable spacing on large and small screens alike --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

kerem added the

pull-request

label

2026-03-02 12:00:23 +03:00

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/karakeep#2058

No description provided.

Rows
Columns