fix(mobile): native settings controls + soundboard/gif/call polish (M5)

Mobile-audit batch 5. Desktop provably unchanged (two review passes).

- Translate-language control: raw <select> (crowded narrow tiles + broke under
  non-default themes) -> the folds-native SettingsSelect used by every other
  dropdown in the settings screen (native-cinny; keeps aria-label).
- Ringtone/Soundboard volume sliders: moved from the fixed-width tile `after`
  slot (which squeezed the title on phones) to a full-width slider in the tile
  body, matching the night-light slider pattern.
- Screenshare-confirm popover: clamp maxWidth to the viewport so it can't run
  past the screen edges on a phone (inert on desktop).
- In-call soundboard editor rows wrap on a narrow popout instead of crushing the
  clip-name field.
- GifPicker: feed the giphy Grid the measured container width (useElementSize
  Observer) instead of a fixed 296px, so it doesn't overflow a <312px phone.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/components/GifPicker.tsx

@@ -1,9 +1,10 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
 import { useAtom } from 'jotai';
 import { Grid, SearchBar, SearchContext, SearchContextManager } from '@giphy/react-components';
 import { IGif } from '@giphy/js-types';
 import { Box, color, config } from 'folds';
+import { useElementSizeObserver } from '../hooks/useElementSizeObserver';
 import { useSetting } from '../state/hooks/settings';
 import { settingsAtom } from '../state/settings';
 import { addRecentGif, RecentGif, recentGifsAtom } from '../state/recentGifs';
@@ -146,8 +147,18 @@ function GifPickerInner({ onSelect, requestClose, lotusTerminal }: GifPickerInne
 
   const showRecents = recents.length > 0 && !(term ?? '').trim();
 
+  // The container is min(312px, 100vw-16); feed the Grid the live pixel width
+  // (minus the inner 8px padding on each side) so it doesn't overflow a phone
+  // narrower than 312px with a fixed 296px grid.
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [gridWidth, setGridWidth] = useState(PICKER_WIDTH - 16);
+  useElementSizeObserver(
+    useCallback(() => containerRef.current, []),
+    useCallback((w) => setGridWidth(Math.max(1, Math.floor(w) - 16)), []),
+  );
+
   return (
-    <Box direction="Column" style={{ width: PICKER_WIDTH_CSS }}>
+    <Box direction="Column" style={{ width: PICKER_WIDTH_CSS }} ref={containerRef}>
       {lotusTerminal && (
         <div
           style={{
@@ -178,7 +189,7 @@ function GifPickerInner({ onSelect, requestClose, lotusTerminal }: GifPickerInne
         <Grid
           key={searchKey}
           fetchGifs={fetchGifs}
-          width={PICKER_WIDTH - 16}
+          width={gridWidth}
           columns={2}
           gutter={4}
           onGifClick={handleClick}

src/app/components/soundboard-pack-view/SoundboardPackEditor.tsx

@@ -275,6 +275,7 @@ export function SoundboardPackEditor({ pack, canEdit, onUpdate }: SoundboardPack
         key={key}
         alignItems="Center"
         gap="200"
+        wrap="Wrap"
         style={{
           padding: config.space.S200,
           borderRadius: config.radii.R400,