From d02254d3c9cb9a43e1a4d69b0049ed8cda0b183d Mon Sep 17 00:00:00 2001
From: Alexander Harding <2166114+aeharding@users.noreply.github.com>
Date: Fri, 9 Aug 2024 20:32:10 -0500
Subject: [PATCH] Fix overflow on create crosspost community selector (#1572)

Resolves #1559
---
 .../create/CreateCrosspostDialog.tsx          | 29 ++++++++++++++-----
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/features/post/crosspost/create/CreateCrosspostDialog.tsx b/src/features/post/crosspost/create/CreateCrosspostDialog.tsx
index b3322cd2e3..a986930094 100644
--- a/src/features/post/crosspost/create/CreateCrosspostDialog.tsx
+++ b/src/features/post/crosspost/create/CreateCrosspostDialog.tsx
@@ -25,6 +25,7 @@ import useAppToast from "../../../../helpers/useAppToast";
 import { checkmark } from "ionicons/icons";
 import { StatusBar } from "@capacitor/status-bar";
 import { isNative } from "../../../../helpers/device";
+import { css } from "@linaria/core";
 
 const Title = styled.div`
   font-size: 1.1em;
@@ -63,6 +64,13 @@ const LoadingIonSpinner = styled(IonSpinner)`
   margin-left: 16px;
 `;
 
+const CommunitySelectorContents = styled.div`
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  width: 100%;
+`;
+
 interface CreateCrosspostDialogProps {
   onDismiss: () => void;
   post: PostView;
@@ -188,14 +196,19 @@ export default function CreateCrosspostDialog({
         <IonItem
           onClick={() => presentCommunitySelectorModal({ cssClass: "small" })}
         >
-          Community
-          <IonText
-            slot="end"
-            color={!community ? "medium" : undefined}
-            className="ion-text-end"
-          >
-            {community ? getHandle(community.community) : "None"}
-          </IonText>
+          <CommunitySelectorContents>
+            <div>Community</div>
+            <IonText
+              color={!community ? "medium" : undefined}
+              className={css`
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+              `}
+            >
+              {community ? getHandle(community.community) : "None"}
+            </IonText>
+          </CommunitySelectorContents>
         </IonItem>
       </PillIonList>
       <PillIonButton