From 20560332ed70f125e20f4f22b44d2b654e462349 Mon Sep 17 00:00:00 2001
From: Harvey Tindall <hrfee@protonmail.ch>
Date: Sun, 24 Dec 2023 14:53:37 +0000
Subject: [PATCH] invites: improve inv dropdown wrapping

---
 css/base.css          |  4 ----
 ts/modules/invites.ts | 10 +++++-----
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/css/base.css b/css/base.css
index 8419053..cc432e5 100644
--- a/css/base.css
+++ b/css/base.css
@@ -223,10 +223,6 @@ sup.\~critical, .text-critical {
     overflow: visible;
 }
 
-.inv-profilearea {
-    min-width: 20%;
-}
-
 .inv-profileselect {
     min-width: 100%;
 }
diff --git a/ts/modules/invites.ts b/ts/modules/invites.ts
index e7a2bc6..8432aa0 100644
--- a/ts/modules/invites.ts
+++ b/ts/modules/invites.ts
@@ -332,14 +332,14 @@ class DOMInvite implements Invite {
         this._details.classList.add("card", "~neutral", "@low", "mt-2", "inv-details");
         const detailsInner = document.createElement('div') as HTMLDivElement;
         this._details.appendChild(detailsInner);
-        detailsInner.classList.add("inv-row", "flex", "flex-row", "justify-between", "align-top");
+        detailsInner.classList.add("inv-row", "flex", "flex-row", "flex-wrap", "justify-between", "align-top", "gap-4");
 
         this._left = document.createElement('div') as HTMLDivElement;
-        this._left.classList.add("flex", "flex-row", "gap-4");
+        this._left.classList.add("flex", "flex-row", "flex-wrap", "gap-4", "min-w-full", "sm:min-w-fit", "whitespace-nowrap");
         detailsInner.appendChild(this._left);
         const leftLeft = document.createElement("div") as HTMLDivElement;
         this._left.appendChild(leftLeft);
-        leftLeft.classList.add("inv-profilearea");
+        leftLeft.classList.add("inv-profilearea", "min-w-full", "sm:min-w-fit");
         let innerHTML = `
         <p class="supra mb-2 top">${window.lang.strings("profile")}</p>
         <div class="select ~neutral @low inv-profileselect inline-block mb-2">
@@ -384,10 +384,10 @@ class DOMInvite implements Invite {
 
         this._right = document.createElement('div') as HTMLDivElement;
         detailsInner.appendChild(this._right);
-        this._right.classList.add("card", "~neutral", "@low", "inv-created-users");
+        this._right.classList.add("card", "~neutral", "@low", "inv-created-users", "min-w-full", "sm:min-w-fit", "whitespace-nowrap");
         this._right.innerHTML = `<span class="supra table-header">${window.lang.strings("inviteUsersCreated")}</span>`;
         this._userTable = document.createElement('div') as HTMLDivElement;
-        this._userTable.classList.add("text-sm", "mt-1");
+        this._userTable.classList.add("text-sm", "mt-1", );
         this._right.appendChild(this._userTable);