From 2e848723e11daf8a1929f6d8527dfe1d84148b6b Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Tue, 23 Dec 2025 09:23:22 +0200
Subject: [PATCH] Improve full group preview UI

---
 app/features/sendouq/components/GroupCard.tsx | 41 +++++++++++--------
 1 file changed, 25 insertions(+), 16 deletions(-)

diff --git a/app/features/sendouq/components/GroupCard.tsx b/app/features/sendouq/components/GroupCard.tsx
index e4b33fe7b..ad1d650c4 100644
--- a/app/features/sendouq/components/GroupCard.tsx
+++ b/app/features/sendouq/components/GroupCard.tsx
@@ -169,25 +169,34 @@ export function GroupCard({
 						<div className="stack sm horizontal items-center justify-center">
 							<div className="stack xs items-center">
 								<TierImage tier={group.tierRange.range[0]} width={80} />
-								<div className="text-lighter text-sm font-bold">
-									({group.tierRange.diff[0]})
-								</div>
+								{group.tierRange.diff[0] ? (
+									<div className="text-lighter text-sm font-bold">
+										({group.tierRange.diff[0]})
+									</div>
+								) : null}
 							</div>
-							<SendouPopover
-								popoverClassName="text-main-forced"
-								trigger={
-									<SendouButton className={styles.popoverButton}>
-										{t("q:looking.range.or")}
-									</SendouButton>
-								}
-							>
-								{t("q:looking.range.or.explanation")}
-							</SendouPopover>
+							{/** in preview mode they don't see full group tiers (because they don't have a group to compare against) so it is a "true range" */}
+							{group.tierRange.diff[0] ? (
+								<SendouPopover
+									popoverClassName="text-main-forced"
+									trigger={
+										<SendouButton className={styles.popoverButton}>
+											{t("q:looking.range.or")}
+										</SendouButton>
+									}
+								>
+									{t("q:looking.range.or.explanation")}
+								</SendouPopover>
+							) : (
+								"—"
+							)}
 							<div className="stack xs items-center">
 								<TierImage tier={group.tierRange.range[1]} width={80} />
-								<div className="text-lighter text-sm font-bold">
-									(+{group.tierRange.diff[1]})
-								</div>
+								{group.tierRange.diff[1] ? (
+									<div className="text-lighter text-sm font-bold">
+										(+{group.tierRange.diff[1]})
+									</div>
+								) : null}
 							</div>
 						</div>
 						{group.isReplay ? (