From 0706d99c82ec17cafd35662e715895ed9ddae52e Mon Sep 17 00:00:00 2001
From: thibaud-leclere <thibaud.leclere@gmail.com>
Date: Mon, 30 Mar 2026 22:53:58 +0200
Subject: [PATCH] fix: force popover to left placement with soft wrap when
 space is limited

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 assets/react/controllers/ActorPopover.jsx | 14 ++++++++++++--
 assets/styles/app.css                     |  2 ++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/assets/react/controllers/ActorPopover.jsx b/assets/react/controllers/ActorPopover.jsx
index 5d0d485..bf3d2d5 100644
--- a/assets/react/controllers/ActorPopover.jsx
+++ b/assets/react/controllers/ActorPopover.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { useFloating, useClick, useDismiss, useInteractions, offset, flip, shift } from '@floating-ui/react';
+import { useFloating, useClick, useDismiss, useInteractions, offset, shift, size } from '@floating-ui/react';
 
 const HINT_ICONS = {
     film: 'fa-solid fa-film',
@@ -13,7 +13,17 @@ export default function ActorPopover({ hintType, hintText }) {
     const { refs, floatingStyles, context } = useFloating({
         open: isOpen,
         onOpenChange: setIsOpen,
-        middleware: [offset(8), flip(), shift()],
+        middleware: [
+            offset(8),
+            size({
+                apply({ availableWidth, elements }) {
+                    Object.assign(elements.floating.style, {
+                        maxWidth: `${availableWidth}px`,
+                    });
+                },
+            }),
+            shift({ padding: 8 }),
+        ],
         placement: 'left',
     });
 
diff --git a/assets/styles/app.css b/assets/styles/app.css
index 26fefe7..5410bb6 100644
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -130,6 +130,8 @@ body {
     z-index: 100;
     font-size: 13px;
     color: var(--text);
+    overflow-wrap: break-word;
+    word-wrap: break-word;
 }
 
 /* ── Auth pages ── */