[PR #208] [MERGED] Fix controls popup layout alignment #219

New issue

Closed

opened 2026-05-07 00:19:16 +02:00 by BreizhHardware · 0 comments

BreizhHardware commented

2026-05-07 00:19:16 +02:00

Owner

📋 Pull Request Information

Original PR: https://github.com/IAmTomShaw/f1-race-replay/pull/208
Author: @darsh-shah4548
Created: 1/31/2026
Status: ✅ Merged
Merged: 2/5/2026
Merged by: @IAmTomShaw

Base: main ← Head: fix-controls-layout-spacing

📝 Commits (1)

47f2340 Fix controls popup layout alignment

📊 Changes

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

View changed files

📝 src/ui_components.py (+28 -16)

📄 Description

Summary

Use two-column layout with fixed x positions instead of space-based alignment
Keys are rendered bold/white at a fixed left position, descriptions rendered gray at a fixed right position
This fixes the inconsistent spacing issue since the font is not monospace and characters like arrows have different widths

Before

Keys and descriptions had inconsistent spacing due to variable character widths in the proportional font.

After

Keys and descriptions are now properly aligned using fixed column positions.

Test plan

Run the app and open a race replay
Press H to open the controls popup
Verify keys and descriptions are properly aligned

Fixes #65

_{🔄 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/IAmTomShaw/f1-race-replay/pull/208 **Author:** [@darsh-shah4548](https://github.com/darsh-shah4548) **Created:** 1/31/2026 **Status:** ✅ Merged **Merged:** 2/5/2026 **Merged by:** [@IAmTomShaw](https://github.com/IAmTomShaw) **Base:** `main` ← **Head:** `fix-controls-layout-spacing` --- ### 📝 Commits (1) - [`47f2340`](https://github.com/IAmTomShaw/f1-race-replay/commit/47f2340f91470ee706ab823d6d5d7b8518f7b095) Fix controls popup layout alignment ### 📊 Changes **1 file changed** (+28 additions, -16 deletions) <details> <summary>View changed files</summary> 📝 `src/ui_components.py` (+28 -16) </details> ### 📄 Description ## Summary - Use two-column layout with fixed x positions instead of space-based alignment - Keys are rendered bold/white at a fixed left position, descriptions rendered gray at a fixed right position - This fixes the inconsistent spacing issue since the font is not monospace and characters like arrows have different widths ## Before ![before](https://github.com/IAmTomShaw/f1-race-replay/issues/65) Keys and descriptions had inconsistent spacing due to variable character widths in the proportional font. <img width="361" height="270" alt="Screenshot 2026-02-01 at 2 17 16 PM" src="https://github.com/user-attachments/assets/1af1b9b2-cda2-4a53-92cc-83786d1926a3" /> ## After Keys and descriptions are now properly aligned using fixed column positions. <img width="354" height="266" alt="Screenshot 2026-02-01 at 2 18 33 PM" src="https://github.com/user-attachments/assets/82e7fd16-4f46-4a1a-9957-8d7cfd96bed9" /> ## Test plan - [x] Run the app and open a race replay - [x] Press H to open the controls popup - [x] Verify keys and descriptions are properly aligned Fixes #65 --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>