From e00bfdce3994306cb5a43346f621def72642217b Mon Sep 17 00:00:00 2001
From: olcxja <olcxja@olcxja.ovh>
Date: Wed, 26 Aug 2026 08:53:28 +0200
Subject: [PATCH] small ui fix

---
 android/app/src/main/assets/public/screens.js |  2 +-
 android/app/src/main/assets/public/style.css  | 11 ++++++++++-
 webroot/screens.js                            |  2 +-
 webroot/style.css                             | 11 ++++++++++-
 4 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/android/app/src/main/assets/public/screens.js b/android/app/src/main/assets/public/screens.js
index 63c3484f..8366ba00 100644
--- a/android/app/src/main/assets/public/screens.js
+++ b/android/app/src/main/assets/public/screens.js
@@ -141,7 +141,7 @@ var invitesEntry = `
 
 var chatScreen = `
 <div style="display: flex; flex-direction: column; height: 100%; width: 100%;">
-    <div id="chat-messages" style="flex-grow: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem;">
+    <div id="chat-messages" style="flex-grow: 1; overflow-y: auto; overflow-x: hidden; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem;">
     </div>
     <div id="replying-bar" style="display: none; padding: 0 1rem; border-top: var(--border-width) solid var(--light-border-color); font-size: 0.85rem; justify-content: space-between; align-items: center; background: var(--main-bg-color);">
         <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-grow: 1;">
diff --git a/android/app/src/main/assets/public/style.css b/android/app/src/main/assets/public/style.css
index 95916d8c..a8d2d709 100644
--- a/android/app/src/main/assets/public/style.css
+++ b/android/app/src/main/assets/public/style.css
@@ -686,6 +686,7 @@ space{
     flex-shrink: 0;
     cursor: pointer;
     margin: 0;
+    position: relative;
 }
 .room-pfp {
     width: 2.2rem;
@@ -738,6 +739,7 @@ space{
     display: flex;
     flex-direction: column;
     flex-grow: 1;
+    min-width: 0;
 }
 .chat-message-header {
     display: flex;
@@ -1178,7 +1180,15 @@ input:checked + .toggle-slider:before {
     margin-top: 0.2rem;
 }
 
+/* Czerwona kropka nieprzeczytanych - pozycjonowana absolutnie. Odstęp liczony tak,
+   żeby ŚRODEK kropki leżał na tej samej osi co środek 1rem-owego .call-indicator
+   (0.6rem paddingu + (1rem - 0.65rem)/2) - inaczej kropka "ucieka" w prawo
+   względem większej ikony słuchawek. */
 .unread-badge {
+    position: absolute;
+    right: calc(0.6rem + (1rem - 0.65rem) / 2);
+    top: 50%;
+    margin-top: -0.325rem;
     width: 0.65rem;
     height: 0.65rem;
     min-width: 0.65rem;
@@ -1186,7 +1196,6 @@ input:checked + .toggle-slider:before {
     background-color: var(--big-red);
     border-radius: 50%;
     flex-shrink: 0;
-    margin-right: 0.5rem;
     transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     transform: scale(0);
 }
diff --git a/webroot/screens.js b/webroot/screens.js
index 63c3484f..8366ba00 100644
--- a/webroot/screens.js
+++ b/webroot/screens.js
@@ -141,7 +141,7 @@ var invitesEntry = `
 
 var chatScreen = `
 <div style="display: flex; flex-direction: column; height: 100%; width: 100%;">
-    <div id="chat-messages" style="flex-grow: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem;">
+    <div id="chat-messages" style="flex-grow: 1; overflow-y: auto; overflow-x: hidden; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem;">
     </div>
     <div id="replying-bar" style="display: none; padding: 0 1rem; border-top: var(--border-width) solid var(--light-border-color); font-size: 0.85rem; justify-content: space-between; align-items: center; background: var(--main-bg-color);">
         <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-grow: 1;">
diff --git a/webroot/style.css b/webroot/style.css
index 95916d8c..a8d2d709 100644
--- a/webroot/style.css
+++ b/webroot/style.css
@@ -686,6 +686,7 @@ space{
     flex-shrink: 0;
     cursor: pointer;
     margin: 0;
+    position: relative;
 }
 .room-pfp {
     width: 2.2rem;
@@ -738,6 +739,7 @@ space{
     display: flex;
     flex-direction: column;
     flex-grow: 1;
+    min-width: 0;
 }
 .chat-message-header {
     display: flex;
@@ -1178,7 +1180,15 @@ input:checked + .toggle-slider:before {
     margin-top: 0.2rem;
 }
 
+/* Czerwona kropka nieprzeczytanych - pozycjonowana absolutnie. Odstęp liczony tak,
+   żeby ŚRODEK kropki leżał na tej samej osi co środek 1rem-owego .call-indicator
+   (0.6rem paddingu + (1rem - 0.65rem)/2) - inaczej kropka "ucieka" w prawo
+   względem większej ikony słuchawek. */
 .unread-badge {
+    position: absolute;
+    right: calc(0.6rem + (1rem - 0.65rem) / 2);
+    top: 50%;
+    margin-top: -0.325rem;
     width: 0.65rem;
     height: 0.65rem;
     min-width: 0.65rem;
@@ -1186,7 +1196,6 @@ input:checked + .toggle-slider:before {
     background-color: var(--big-red);
     border-radius: 50%;
     flex-shrink: 0;
-    margin-right: 0.5rem;
     transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     transform: scale(0);
 }