@micha.bigler/ui-core-micha 2.26.2 → 2.26.3

package/dist/messaging/PollCard.js

@@ -122,11 +122,15 @@ export function PollCard({ message, canClose: canCloseProp }) {
         // screenshot of the checkbox/text/percent squeezed onto one tight line
         // with a thin bar close to the text) -- more internal spacing/a taller
         // bar, not a wider bubble (MessageBubble.jsx's maxWidth is untouched).
-        const richLabel = _jsxs(Stack, { sx: { flex: 1, minWidth: 0, opacity: pending.has(option.id) ? 0.6 : 1 }, spacing: 0.75, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { variant: "body2", noWrap: true, children: option.text || option.label }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: resultText })] }), _jsx(LinearProgress, { variant: "determinate", value: percent, sx: { borderRadius: 1, height: 8 }, color: votedByMe ? 'primary' : 'inherit' })] });
+        const richLabel = _jsxs(Stack, { sx: { flex: 1, minWidth: 0, opacity: pending.has(option.id) ? 0.6 : 1 }, spacing: 0.75, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", spacing: 1, children: [_jsx(Typography, { variant: "body2", noWrap: true, children: option.text || option.label }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: resultText })] }), _jsx(LinearProgress, { variant: "determinate", value: percent, sx: { borderRadius: 1, height: 8 }, color: votedByMe ? 'primary' : 'inherit' })] });
         return { accessibleLabel, richLabel };
     };
     const formControlSx = { width: '100%', m: 0, alignItems: 'flex-start' };
-    return _jsx(Paper, { variant: "outlined", sx: { p: 1.5 }, "aria-label": t('MessagingPoll.LABEL'), children: _jsxs(Stack, { spacing: 1.5, children: [_jsx(Typography, { variant: "subtitle2", children: poll.question }), poll.allow_multiple
+    // MSG-6j: a short question/option set could otherwise pull the whole `MessageBubble`
+    // (`width: fit-content`) in tighter than comfortable to read. 260px stays under the
+    // bubble's own `maxWidth: min(75%, 680px)` ceiling even at a 375px viewport (75% = 281px)
+    // -- verified at that width, not just desktop.
+    return _jsx(Paper, { variant: "outlined", sx: { p: 1.5, minWidth: 260 }, "aria-label": t('MessagingPoll.LABEL'), children: _jsxs(Stack, { spacing: 1.5, children: [_jsx(Typography, { variant: "subtitle2", children: poll.question }), poll.allow_multiple
                     ? (poll.options || []).map((option) => {
                         const { accessibleLabel, richLabel } = optionLabel(option);
                         return _jsx(FormControlLabel, { disabled: closed, sx: formControlSx, label: richLabel, control: _jsx(Checkbox, { checked: selected.includes(option.id), inputProps: { 'aria-label': accessibleLabel }, onChange: () => tap(option.id), sx: { pt: 0.25 } }) }, option.id);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "2.26.2",
+  "version": "2.26.3",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {

package/src/messaging/PollCard.jsx

@@ -110,7 +110,13 @@ export function PollCard({ message, canClose: canCloseProp }) {
     // with a thin bar close to the text) -- more internal spacing/a taller
     // bar, not a wider bubble (MessageBubble.jsx's maxWidth is untouched).
     const richLabel = <Stack sx={{ flex: 1, minWidth: 0, opacity: pending.has(option.id) ? 0.6 : 1 }} spacing={0.75}>
-      <Stack direction="row" justifyContent="space-between">
+      {/* MSG-6j: `justifyContent: 'space-between'` only distributes LEFTOVER width -- but
+          this row sits inside a `MessageBubble` sized `width: fit-content` around this exact
+          content, so there is by construction no leftover width, and space-between alone
+          reserved a zero-width gap (the reported bug: label text ran directly into the
+          vote-count/percent text). `spacing` adds a real minimum gap via margin, independent
+          of justify-content, so the two never touch regardless of available width. */}
+      <Stack direction="row" justifyContent="space-between" spacing={1}>
         <Typography variant="body2" noWrap>{option.text || option.label}</Typography>
         <Typography variant="caption" color="text.secondary">{resultText}</Typography>
       </Stack>
@@ -120,7 +126,11 @@ export function PollCard({ message, canClose: canCloseProp }) {
   };
   const formControlSx = { width: '100%', m: 0, alignItems: 'flex-start' };
 
-  return <Paper variant="outlined" sx={{ p: 1.5 }} aria-label={t('MessagingPoll.LABEL')}><Stack spacing={1.5}>
+  // MSG-6j: a short question/option set could otherwise pull the whole `MessageBubble`
+  // (`width: fit-content`) in tighter than comfortable to read. 260px stays under the
+  // bubble's own `maxWidth: min(75%, 680px)` ceiling even at a 375px viewport (75% = 281px)
+  // -- verified at that width, not just desktop.
+  return <Paper variant="outlined" sx={{ p: 1.5, minWidth: 260 }} aria-label={t('MessagingPoll.LABEL')}><Stack spacing={1.5}>
     <Typography variant="subtitle2">{poll.question}</Typography>
     {poll.allow_multiple
       ? (poll.options || []).map((option) => {

package/tests/messagingPollRendering.test.jsx

@@ -122,4 +122,21 @@ describe('poll rendering against the real server contract', () => {
     screen.getAllByRole('radio').forEach((radio) => expect(radio.disabled).toBe(true));
     expect(screen.getByText('MessagingPoll.CLOSED')).toBeTruthy();
   });
+
+  it('gives the card a minimum width so a short question/option set is not squeezed narrower than comfortable (MSG-6j)', () => {
+    render(<MessagingProvider api={baseApi()} active={false}><PollCard message={{ id: 'msg-1', poll: serverPoll() }} /></MessagingProvider>);
+    const card = screen.getByLabelText('MessagingPoll.LABEL');
+    expect(getComputedStyle(card).minWidth).toBe('260px');
+  });
+
+  it('keeps a real gap between an option label and its vote-count/percent text, not merely space-between with nothing to distribute (MSG-6j)', () => {
+    // Regression test for the reported bug: `justifyContent: 'space-between'` alone only
+    // distributes LEFTOVER width, and this row sits inside a `width: fit-content` bubble
+    // sized around this exact content -- there is never leftover width, so space-between
+    // reserved a zero-width gap and the option text ran directly into "2 (100 %)". Must
+    // fail if the row's own `spacing` is removed.
+    render(<MessagingProvider api={baseApi()} active={false}><PollCard message={{ id: 'msg-1', poll: serverPoll() }} /></MessagingProvider>);
+    const resultText = screen.getByText(/MessagingPoll\.OPTION_RESULT.*"count":2.*"percent":67/);
+    expect(getComputedStyle(resultText).marginLeft).not.toBe('0px');
+  });
 });