# Improve commit container at larger font sizes \(\#60331\) · gitcafe/zed

[View on GitCafe](https://git.cafe/gitcafe/zed/commit/aabcd71690db4d5608eef8fcca4623b3bb10f7b1)

Repository: [gitcafe/zed](https://git.cafe/gitcafe/zed)

Visibility: public

Requested revision: aabcd71690db4d5608eef8fcca4623b3bb10f7b1

Requested commit: aabcd71690db4d5608eef8fcca4623b3bb10f7b1

Commit: aabcd71690db4d5608eef8fcca4623b3bb10f7b1

Tree: f5640bc7171da0ce34b36864faac22b422368ab4

Author: Zak Nesler

Committer: GitHub

## Message

```
Improve commit container at larger font sizes (#60331)

At larger font sizes (e.g. I have profiles that increase the font sizes
when screen sharing) the commit button in the git panel editor does not
stay aligned to the bottom-right of the screen, and overlaps the other
elements:

<details>
  <summary>Click to show showcase</summary>


https://github.com/user-attachments/assets/e73034db-07a6-42d7-b993-9d8091e50b70

Notice the extra clipping of the commit message editor element:

<img width="500" alt="image"
src="https://github.com/user-attachments/assets/67d59405-57e2-4547-87c2-1c4728515c26"
/>

</details>

This was happening because the floating icons on the right and the
footer containing the commit button were positioned absolutely, used
pixels instead of responsive rems, and had an offset that was calculated
and did not account for changes in user rem size.

So I've moved things around to be more "flexy"... basically just
removing the absolute positioning and making the elements flush against
one another.

## Testing

I have tested this manually on macOS 27 beta 2 and Windows 11, both
using various light/dark themes, window sizes, commit text, etc.

## Self-Review Checklist:

- [x] I've reviewed my own diff for quality, security, and reliability
- [x] Unsafe blocks (if any) have justifying comments
- [x] The content adheres to Zed's UI standards
([UX/UI](https://github.com/zed-industries/zed/blob/main/CONTRIBUTING.md#uiux-checklist)
and
[icon](https://github.com/zed-industries/zed/blob/main/crates/icons/README.md)
guidelines)
- [ ] ~~Tests cover the new/changed behavior~~
- [x] Performance impact has been considered and is acceptable

## Showcase

Here's a demo at different zoom levels, with and without text, when
expanding the commit window, etc.

<details>
  <summary>Click to view showcase</summary>


https://github.com/user-attachments/assets/bea82da1-0c7f-4d51-a73b-d4bc4581a2b7

And here's another demo with debug colors for the different elements to
see what's going on:


https://github.com/user-attachments/assets/12fd3e95-5089-4e34-a84c-c352219ee197

</details>
---

Release Notes:

- Git Panel: Fixed overlapping elements in commit message container

---------

Co-authored-by: zed-zippy[bot] <234243425+zed-zippy[bot]@users.noreply.github.com>
Co-authored-by: Danilo Leal <daniloleal09@gmail.com>
```

## Parents

- [b497e2024aebe0adeefde670f6f3e1ef9c4257a7](https://git.cafe/gitcafe/zed/commit/b497e2024aebe0adeefde670f6f3e1ef9c4257a7?format=markdown)

[Source at this commit](https://git.cafe/gitcafe/zed/tree/aabcd71690db4d5608eef8fcca4623b3bb10f7b1?format=markdown)