From 214fae0c6e97edb576052925310ea543312207cc Mon Sep 17 00:00:00 2001
From: ayumi-signal <143036029+ayumi-signal@users.noreply.github.com>
Date: Fri, 3 May 2024 07:04:41 -0700
Subject: [PATCH] Fix call link notice on group call; fix call participants
 horizontal alignment

---
 _locales/en/messages.json                     |  2 +-
 stylesheets/_modules.scss                     | 24 ++++++++-----
 .../components/CallingAdhocCallInfo.scss      | 28 ++++++++-------
 ts/components/CallingLobby.tsx                | 35 ++++++++++---------
 4 files changed, 52 insertions(+), 37 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 8e039c46bc9a..f85d5d3ab0b8 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -3671,7 +3671,7 @@
     "description": "Title for the select your screen sharing sources modal"
   },
   "icu:CallingAdhocCallInfo__CopyLink": {
-    "messageformat": "Copy link",
+    "messageformat": "Copy call link",
     "description": "Menu item in the in-call info popup for call link calls. The action is to add the call link to the clipboard."
   },
   "icu:CallingAdhocCallInfo__RemoveClient": {
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 1779703e4467..9c5fa3a48834 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -4367,29 +4367,37 @@ button.module-image__border-overlay:focus {
   flex-direction: column;
   width: 320px;
   height: 440px;
+  max-height: calc(100vh - $CallControls__height - 22px);
+  padding-block: 5px 0;
+  padding-inline: 5px;
+  margin-block-end: 85px;
+  margin-block-start: 20px;
+  margin-inline: auto;
   background-color: $color-gray-80;
   border-radius: 10px;
   color: $color-white;
   filter: drop-shadow(0px 4px 3px $color-black-alpha-20);
-  margin-inline-end: 340px;
-  margin-block-end: 85px;
-  margin-block-start: 20px;
   outline: 1px solid $color-gray-62;
   overflow: hidden;
-  padding-block: 5px 0;
-  padding-inline: 5px;
 
   &__overlay {
     position: absolute;
     top: 0;
     display: flex;
-    flex-direction: column;
-    align-items: center;
+    flex-direction: row;
     width: 100vw;
     height: 100vh;
-    justify-content: flex-end;
+    padding-inline-start: 15px;
+    align-items: flex-end;
     inset-inline-start: 0;
     z-index: $z-index-calling;
+
+    &::after {
+      content: '';
+      display: flex;
+      flex-shrink: 1;
+      flex-basis: 480px;
+    }
   }
 
   &__title {
diff --git a/stylesheets/components/CallingAdhocCallInfo.scss b/stylesheets/components/CallingAdhocCallInfo.scss
index 6adc5bd5f43b..0b9013260b6a 100644
--- a/stylesheets/components/CallingAdhocCallInfo.scss
+++ b/stylesheets/components/CallingAdhocCallInfo.scss
@@ -2,23 +2,32 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 .CallingAdhocCallInfo {
-  width: 100%;
+  flex-shrink: 0;
+  width: 360px;
   height: auto;
   margin-block-end: auto;
   padding-block-end: 16px;
-  overflow: auto;
+  pointer-events: auto;
 }
 
 .CallingAdhocCallInfo__width-container {
   display: flex;
-  flex-direction: column;
-  width: 360px;
+  flex-direction: row;
+  width: 100%;
+  max-width: none;
   height: auto;
   padding-block: 1px;
-  padding-inline: 1px;
-  margin-block-end: 102px;
-  margin-inline-start: 90px;
+  padding-inline-start: 15px;
+  margin-block-end: 80px;
   overflow: hidden;
+  pointer-events: none;
+}
+
+.CallingAdhocCallInfo__width-container::after {
+  content: '';
+  display: flex;
+  flex-shrink: 1;
+  flex-basis: 480px;
 }
 
 .CallingAdhocCallInfo__overlay {
@@ -29,11 +38,6 @@
   flex-direction: column;
   padding: 0;
   justify-content: flex-end;
-  align-items: start;
-}
-
-.CallingAdhocCallInfo__Overlay {
-  align-items: start;
 }
 
 .CallingAdhocCallInfo__MenuItem {
diff --git a/ts/components/CallingLobby.tsx b/ts/components/CallingLobby.tsx
index da0abc4e6bf1..b13d22de54fe 100644
--- a/ts/components/CallingLobby.tsx
+++ b/ts/components/CallingLobby.tsx
@@ -311,22 +311,25 @@ export function CallingLobby({
           {i18n('icu:calling__your-video-is-off')}
         </div>
 
-        {callMode === CallMode.Adhoc && isAdhocJoinRequestPending ? (
-          <div className="CallingLobby__CallLinkNotice CallingLobby__CallLinkNotice--join-request-pending">
-            <SpinnerV2
-              className="CallingLobby__CallLinkJoinRequestPendingSpinner"
-              size={16}
-              strokeWidth={3}
-            />
-            {i18n('icu:CallingLobby__CallLinkNotice--join-request-pending')}
-          </div>
-        ) : (
-          <div className="CallingLobby__CallLinkNotice">
-            {isSharingPhoneNumberWithEverybody
-              ? i18n('icu:CallingLobby__CallLinkNotice--phone-sharing')
-              : i18n('icu:CallingLobby__CallLinkNotice')}
-          </div>
-        )}
+        {/* eslint-disable-next-line no-nested-ternary */}
+        {callMode === CallMode.Adhoc ? (
+          isAdhocJoinRequestPending ? (
+            <div className="CallingLobby__CallLinkNotice CallingLobby__CallLinkNotice--join-request-pending">
+              <SpinnerV2
+                className="CallingLobby__CallLinkJoinRequestPendingSpinner"
+                size={16}
+                strokeWidth={3}
+              />
+              {i18n('icu:CallingLobby__CallLinkNotice--join-request-pending')}
+            </div>
+          ) : (
+            <div className="CallingLobby__CallLinkNotice">
+              {isSharingPhoneNumberWithEverybody
+                ? i18n('icu:CallingLobby__CallLinkNotice--phone-sharing')
+                : i18n('icu:CallingLobby__CallLinkNotice')}
+            </div>
+          )
+        ) : null}
 
         <CallingButtonToastsContainer
           hasLocalAudio={hasLocalAudio}