FIX - add Chrome 103 rendering fallbacks

frontend/src/assets/main.css

@@ -14,9 +14,13 @@
 .sim-picker {
   position: relative;
   width: min(58vh, 90vw);
-  max-height: 46vh;
-  overflow: clip;
+  max-width: calc(100vw - 32px);
+  max-height: calc(100vh - 32px);
+  min-height: 0;
+  overflow: hidden;
   padding: 2.2vh;
+  display: flex;
+  flex-direction: column;
   border: 0.1vh solid rgb(255 255 255 / 12%);
   border-radius: 0.9vh;
   background: #050505;
@@ -56,11 +60,16 @@
 
 .sim-picker__header {
   display: flex;
+  flex: 0 0 auto;
   justify-content: space-between;
   gap: 2vh;
   margin-bottom: 1.6vh;
 }
 
+.sim-picker__header > div {
+  min-width: 0;
+}
+
 .sim-picker__header h1,
 .sim-picker__confirmation h2 {
   margin: 0;
@@ -73,6 +82,7 @@
   margin: 0.45vh 0 0;
   color: #9ca3af;
   font-size: 1.15vh;
+  overflow-wrap: anywhere;
 }
 
 .sim-picker__close {
@@ -80,6 +90,8 @@
   place-items: center;
   width: 2.8vh;
   height: 2.8vh;
+  min-width: 32px;
+  min-height: 32px;
   border: 0;
   border-radius: 0.35vh;
   background: #1dd1ce;
@@ -96,10 +108,12 @@
   position: relative;
   z-index: 1;
   display: grid;
+  flex: 1 1 auto;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 1vh;
-  max-height: 34vh;
-  overflow: auto;
+  min-height: 0;
+  max-height: 54vh;
+  overflow-y: auto;
 }
 
 .sim-picker__card {
@@ -140,30 +154,34 @@
 }
 
 .sim-picker__details strong {
-  overflow: hidden;
   font-size: 1.2vh;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
 }
 
 .sim-picker__details small {
   color: #9ca3af;
   font-size: 0.95vh;
+  overflow-wrap: anywhere;
 }
 
 .sim-picker__confirmation {
+  min-height: 0;
+  overflow-y: auto;
   padding: 2vh 0 0;
   text-align: center;
 }
 
 .sim-picker__confirmation > div {
   display: flex;
+  flex-wrap: wrap;
   justify-content: center;
   gap: 1vh;
   margin-top: 2vh;
 }
 
 .sim-picker__confirmation button {
+  min-height: 40px;
+  overflow-wrap: anywhere;
   padding: 0.8vh 1.6vh;
   border: 0.1vh solid rgb(255 255 255 / 18%);
   border-radius: 0.45vh;
@@ -184,6 +202,13 @@
   color: #ff453a;
   font-size: 1vh;
   text-align: center;
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 640px) {
+  .sim-picker__cards {
+    grid-template-columns: 1fr;
+  }
 }
 :root {
   font-family:
@@ -205,6 +230,7 @@ body,
   margin: 0;
   overflow: hidden;
   background: transparent !important;
+  pointer-events: none;
   user-select: none;
 }
 button,
@@ -885,13 +911,13 @@ button {
 }
 
 /* DarkChat is intentionally independent from the phone appearance setting. */
-.phone-app:has(.darkchat-page),
-.phone-app:has(.darkchat-page) .phone-app-window,
-.phone-app:has(.darkchat-page) .phone-app-window__content {
+.phone-app--darkchat,
+.phone-app--darkchat .phone-app-window,
+.phone-app--darkchat .phone-app-window__content {
   background: #000 !important;
   color-scheme: dark;
 }
-.phone-app:has(.darkchat-page) .phone-status-bar {
+.phone-app--darkchat .phone-status-bar {
   color: #fff !important;
   --status-bar-color: #fff;
 }
@@ -1592,7 +1618,7 @@ button {
   font-size: 9px;
   white-space: nowrap;
 }
-.darkchat-message:has(.darkchat-reactions) {
+.darkchat-message {
   margin-bottom: 12px;
 }
 .darkchat-replying {
@@ -3714,7 +3740,7 @@ button {
 .clock-world-time {
   margin-top: 8px;
   font-variant-numeric: tabular-nums;
-  font-size: min(76px, 20cqw);
+  font-size: 74px;
   font-weight: 200;
   letter-spacing: -4px;
 }
@@ -3861,7 +3887,7 @@ button {
 .clock-digits {
   margin: 70px 0 54px;
   font-variant-numeric: tabular-nums;
-  font-size: min(52px, 14cqw);
+  font-size: 52px;
   font-weight: 200;
 }
 .clock-sound-menu {
@@ -4242,11 +4268,11 @@ button {
   background: #fff !important;
   color: #111;
 }
-.phone-app:has(.messages-page) .phone-status-bar {
+.phone-app--messages .phone-status-bar {
   color: #080808;
   text-shadow: none;
 }
-.phone-app:has(.messages-page)::before {
+.phone-app--messages::before {
   content: '';
   position: absolute;
   z-index: 60;
@@ -5458,7 +5484,7 @@ button {
   }
 }
 /* iOS 26-style Liquid Glass refinements and complete media pickers. */
-.phone-app:has(.messages-page) {
+.messages-page {
   --ios-glass: rgb(252 252 255 / 70%);
   --ios-glass-strong: rgb(255 255 255 / 86%);
   --ios-glass-border: rgb(255 255 255 / 72%);
@@ -5779,21 +5805,21 @@ button {
 .messages-attachment--video small {
   z-index: 2;
 }
-.messages-attachment--gif:has(img) {
+.messages-attachment--gif {
   background: #e9e9ed;
 }
 
 /* Konsta's k-app dark state drives the complete iOS Messages palette. */
-.phone-app.dark:has(.messages-page) {
+.phone-app.dark .messages-page {
   --ios-glass: rgb(28 28 30 / 76%);
   --ios-glass-strong: rgb(36 36 38 / 90%);
   --ios-glass-border: rgb(255 255 255 / 12%);
   color-scheme: dark;
 }
-.phone-app.dark:has(.messages-page)::before {
+.phone-app--messages.dark::before {
   background: #000;
 }
-.phone-app.dark:has(.messages-page) .phone-status-bar {
+.phone-app--messages.dark .phone-status-bar {
   color: #fff;
   text-shadow: none;
 }