[PR #663] fix: border radius on connected button groups #737

New Issue

2026-02-16T12:36:23-05:00

yindo commented

2026-02-16 12:36:23 -05:00

📋 Pull Request Information

Original PR: https://github.com/stoatchat/for-web/pull/663
Author: @penguinencounter
Created: 2/11/2026
Status: 🔄 Open

Base: main ← Head: fix-border-radius-connected-groups

📝 Commits (1)

dd48042 fix: border radius on connected button groups

📊 Changes

1 file changed (+16 additions, -22 deletions)

View changed files

📝 packages/client/components/ui/components/design/Button.tsx (+16 -22)

📄 Description

Hopefully you don't mind this PR, apologies in advance if I did it wrong! The inconsistency was bothering me.

Before:

After:

roughly copied from the commit message:

The current styling causes border radii on connected groups to be inconsistent between buttons in the middle vs buttons on the end of the group. (This is most obvious in the Appearance tab in the settings.)

This is due to how the CSS spec handles border-radius values that cause overlapping corners (ex. the ones used to create pill-shaped buttons here) - instead of only reducing the conflicting corners, all corners are reduced proportionally as needed:
https://drafts.csswg.org/css-backgrounds/#corner-overlap

This is fixed by introducing a --max-radius CSS variable that is half of the button's height, which achieves the same effect without having corner overlaps. As a bonus, we reduce the shape: "round" variants to a single one that references the variable.

Note that there could potentially still be a consistency issue if a button is less wide than tall, but that seems very unlikely.

_{🔄 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/stoatchat/for-web/pull/663 **Author:** [@penguinencounter](https://github.com/penguinencounter) **Created:** 2/11/2026 **Status:** 🔄 Open **Base:** `main` ← **Head:** `fix-border-radius-connected-groups` --- ### 📝 Commits (1) - [`dd48042`](https://github.com/stoatchat/for-web/commit/dd480427c8e6b0f53c2252993ac169d200fd4094) fix: border radius on connected button groups ### 📊 Changes **1 file changed** (+16 additions, -22 deletions) <details> <summary>View changed files</summary> 📝 `packages/client/components/ui/components/design/Button.tsx` (+16 -22) </details> ### 📄 Description Hopefully you don't mind this PR, apologies in advance if I did it wrong! The inconsistency was bothering me. Before: <img width="770" height="234" alt="image" src="https://github.com/user-attachments/assets/aab3db1f-842d-4d9a-852b-833dbd2c41df" /> After: <img width="770" height="234" alt="image" src="https://github.com/user-attachments/assets/277c33a4-056c-467a-91d7-59cbb344b9fa" /> roughly copied from the commit message: > The current styling causes border radii on connected groups to be inconsistent between buttons in the middle vs buttons on the end of the group. (This is most obvious in the Appearance tab in the settings.) > > This is due to how the CSS spec handles `border-radius` values that cause overlapping corners (ex. the ones used to create pill-shaped buttons here) - instead of only reducing the conflicting corners, all corners are reduced proportionally as needed: > https://drafts.csswg.org/css-backgrounds/#corner-overlap > > This is fixed by introducing a `--max-radius` CSS variable that is half of the button's height, which achieves the same effect without having corner overlaps. As a bonus, we reduce the `shape: "round"` variants to a single one that references the variable. > > Note that there could potentially still be a consistency issue if a button is less wide than tall, but that seems very unlikely. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

yindo added the pull-request label 2026-02-16 12:36:23 -05:00

yindo referenced this issue

2026-02-16 12:36:27 -05:00

[PR #737] fix: workaround links that are actually intended for the app #762

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: stoatchat/for-web#737