dennii/Connect-5
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/Connect-5.git synced 2026-04-17 20:36:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix UI overlap by truncating long status messages

Browse Source
This commit is contained in:
DeNNiiInc
2025-12-21 20:51:19 +11:00
parent 79ffb771a8
commit 90cf68327a
1 changed files with 28 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
styles.css
View File

@@ -438,12 +438,12 @@ body {
justify-content: space-between;
align-items: center;
padding: 0.75rem 1.5rem;
background: var(--bg-tertiary);
border-radius: 12px;
background: var(--bg-secondary);
border-radius: 16px;
border: 1px solid var(--border-light);
width: 100%;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
min-height: 70px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
gap: 1rem;
}
/* Left Side: Turn Info + Text */
@@ -453,12 +453,28 @@ body {
justify-content: center;
align-items: flex-start;
gap: 0.25rem;
flex: 1;
min-width: 0; /* Important for text truncation in flex item */
}
.turn-display {
display: flex;
align-items: center;
gap: 1rem;
gap: 0.75rem;
}
.turn-display .label {
color: var(--text-secondary);
font-size: 0.9rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.turn-display .current-player {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-primary);
}
.status-text-small {
@@ -466,6 +482,13 @@ body {
color: var(--text-secondary);
font-weight: 500;
margin-top: 2px;
/* Text Truncation */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
display: block;
}
/* Right Side: Identity */