update

frontend/src/components/workspace/SearchableCountryPicker.jsx

@@ -13,7 +13,7 @@ export function SearchableCountryPicker({ value, onChange, className = '' }) {
     const triggerRef = useRef(null);
     const menuRef = useRef(null);
     const inputRef = useRef(null);
-    const [pos, setPos] = useState({ top: 0, left: 0, width: 0 });
+    const [pos, setPos] = useState({ top: 0, left: 0, width: 320 });
 
     const matched = matchCountry(value || '', countries);
     const flag = matched ? flagEmojiFromCode(matched.code) : '🏳️';
@@ -28,19 +28,37 @@ export function SearchableCountryPicker({ value, onChange, className = '' }) {
         );
     }, [countries, query]);
 
+    const computeMenuPosition = () => {
+        const trigger = triggerRef.current;
+        if (!trigger) return;
+        const r = trigger.getBoundingClientRect();
+        const PAD = 12;
+        const MENU_W = 320;
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        // Last-column friendly: if trigger sits in the right part of the viewport,
+        // anchor the panel by its right edge to the trigger's right edge so the menu opens leftward.
+        const inRightZone = r.right > vw * 0.55;
+        let left = inRightZone ? r.right - MENU_W : r.left;
+        left = Math.max(PAD, Math.min(left, vw - MENU_W - PAD));
+
+        const estPanelH = Math.min(vh * 0.72, 420);
+        let top = r.bottom + 6;
+        if (top + estPanelH > vh - PAD) {
+            top = Math.max(PAD, r.top - estPanelH - 6);
+        }
+
+        setPos({ top, left, width: MENU_W });
+    };
+
     useLayoutEffect(() => {
         if (!open || !triggerRef.current) return;
-        const r = triggerRef.current.getBoundingClientRect();
-        setPos({ top: r.bottom + 4, left: r.left, width: Math.max(r.width, 220) });
+        computeMenuPosition();
     }, [open]);
 
     useEffect(() => {
         if (!open) return;
-        const reposition = () => {
-            if (!triggerRef.current) return;
-            const r = triggerRef.current.getBoundingClientRect();
-            setPos({ top: r.bottom + 4, left: r.left, width: Math.max(r.width, 220) });
-        };
+        const reposition = () => computeMenuPosition();
         window.addEventListener('scroll', reposition, true);
         window.addEventListener('resize', reposition);
         return () => {
@@ -102,18 +120,15 @@ export function SearchableCountryPicker({ value, onChange, className = '' }) {
                         ref={menuRef}
                         role="listbox"
                         data-country-picker="true"
-                        className="fixed z-[10050] rounded-md border border-slate-200 bg-white shadow-lg"
+                        className="fixed z-[10050] flex max-h-[min(70vh,24rem)] flex-col rounded-md border border-slate-200 bg-white shadow-xl ring-1 ring-black/5"
                         style={{
                             top: pos.top,
                             left: pos.left,
-                            minWidth: pos.width,
-                            maxHeight: 'min(70vh, 20rem)',
-                            display: 'flex',
-                            flexDirection: 'column',
+                            width: pos.width,
                         }}
                         onClick={(e) => e.stopPropagation()}
                     >
-                        <div className="border-b border-slate-100 p-2">
+                        <div className="shrink-0 border-b border-slate-100 p-2">
                             <input
                                 ref={inputRef}
                                 type="search"
@@ -126,7 +141,7 @@ export function SearchableCountryPicker({ value, onChange, className = '' }) {
                                 className="w-full rounded-md border border-slate-200 px-2 py-1.5 text-sm outline-none focus:border-violet-300 focus:ring-1 focus:ring-violet-200"
                             />
                         </div>
-                        <div className="overflow-y-auto p-1">
+                        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-1">
                             <button
                                 type="button"
                                 role="option"

frontend/src/pages/Deals.jsx

@@ -277,7 +277,7 @@ function DealRow({ deal, tableEditRowId, setTableEditRowId, patchDeal, updateSta
                     </div>
                 )}
             </td>
-            <td className="px-3 py-2 align-top tabular-nums max-w-[120px]">
+            <td className="px-3 py-2 align-top tabular-nums min-w-[10rem] w-40 max-w-[16rem]">
                 {tableEditRowId === deal.id ? (
                     <EditableCell
                         type="number"
@@ -291,6 +291,8 @@ function DealRow({ deal, tableEditRowId, setTableEditRowId, patchDeal, updateSta
                             if (!Number.isFinite(n)) return;
                             patchDeal(deal.id, { deal_value: n });
                         }}
+                        className="w-full"
+                        inputClassName="min-w-[9rem] w-full max-w-full tabular-nums text-right text-base py-1"
                     />
                 ) : (
                     <div className="min-h-[2rem] py-1 text-sm text-slate-700 tabular-nums">