From a5a9328faf1ab28a1b145da5120cba7ca20181b6 Mon Sep 17 00:00:00 2001
From: Marc Osenberg <marc.osenberg@arcturusgroup.it>
Date: Mon, 28 Sep 2026 10:00:01 +0200
Subject: [PATCH] fix(ui): stop horizontal overflow on the listing detail view
 on phones

On viewports below 430px the detail page was clipped on the right.
`.listing-detail` is a flex item of `.app__content` without
`min-width: 0`, so it grew to the width of its widest child (long
titles, addresses and URLs without spaces) instead of the space left
next to the sidebar.

Add ListingDetail.mobile.less, scoped to `.listing-detail` and a single
`max-width: 430px` media query, so upstream merges stay trivial:
- let the page shrink to the available width and drop the fixed 400px rail
- cap images and svg at 100% width
- wrap long words and URLs
- collapse key-fact tiles, workspace columns and finance facts to one column

ListingDetail.jsx only gains the stylesheet import.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 ui/src/views/listings/ListingDetail.jsx       |  1 +
 .../views/listings/ListingDetail.mobile.less  | 84 +++++++++++++++++++
 2 files changed, 85 insertions(+)
 create mode 100644 ui/src/views/listings/ListingDetail.mobile.less

diff --git a/ui/src/views/listings/ListingDetail.jsx b/ui/src/views/listings/ListingDetail.jsx
index 23aba036..922731bc 100644
--- a/ui/src/views/listings/ListingDetail.jsx
+++ b/ui/src/views/listings/ListingDetail.jsx
@@ -36,6 +36,7 @@ import ListingLocationCard from './components/ListingLocationCard.jsx';
 import ListingWorkspace from './components/ListingWorkspace.jsx';
 import ListingDescriptionCard from './components/ListingDescriptionCard.jsx';
 import './ListingDetail.less';
+import './ListingDetail.mobile.less';
 import { useTranslation } from '../../services/i18n/i18n.jsx';
 import { useFinanceProfile } from '../../hooks/useFinanceProfile.js';
 
diff --git a/ui/src/views/listings/ListingDetail.mobile.less b/ui/src/views/listings/ListingDetail.mobile.less
new file mode 100644
index 00000000..b325eb1d
--- /dev/null
+++ b/ui/src/views/listings/ListingDetail.mobile.less
@@ -0,0 +1,84 @@
+@import '../../tokens.less';
+
+/* Local override: keeps the listing detail view inside the viewport on phones (< 430px).
+   Kept in its own file, loaded after ListingDetail.less, so upstream merges stay trivial.
+   Everything is scoped to `.listing-detail` and to one media query. */
+@media (max-width: 430px) {
+  .listing-detail {
+    /* A flex item of `.app__content`; without `min-width: 0` it grows to its widest child. */
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    overflow-x: clip;
+
+    img,
+    picture,
+    video,
+    canvas,
+    svg,
+    .semi-image,
+    .semi-image-img {
+      max-width: 100%;
+    }
+
+    &__grid,
+    &__main,
+    &__rail,
+    &__grid > *,
+    .listing-card {
+      min-width: 0;
+      max-width: 100%;
+      box-sizing: border-box;
+    }
+
+    /* The rail has a fixed 400px width on desktop; drop it so it can never exceed the screen. */
+    &__rail {
+      width: auto;
+      flex-basis: auto;
+    }
+
+    &__image {
+      width: 100%;
+      max-width: 100%;
+    }
+
+    /* Long words and URLs wrap instead of pushing the card wider. */
+    .listing-title__heading,
+    .listing-title__address,
+    .listing-title__address-link,
+    .listing-card,
+    .listing-card p,
+    .listing-card a,
+    .listing-card span,
+    .listing-description__body,
+    .listing-origin {
+      overflow-wrap: anywhere;
+      word-break: break-word;
+    }
+
+    .listing-title {
+      padding-left: @space-4;
+      padding-right: @space-4;
+    }
+
+    .listing-title__heading {
+      max-width: 100%;
+      font-size: 24px;
+    }
+
+    .listing-title__address {
+      flex-basis: 100%;
+    }
+
+    /* Column layouts collapse to one column. */
+    .listing-keyfacts__tiles,
+    .listing-workspace__columns,
+    .listingFinance__facts {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .listing-card {
+      padding: @space-4;
+    }
+  }
+}