d

app/soapbox/components/status_content.tsx

@@ -273,11 +273,13 @@ const StatusContent: React.FC<IStatusContent> = ({ status, expanded = false, onE
       output.push(<ReadMoreButton onClick={onClick} key='read-more' />);
     }
 
-    if (status.poll && typeof status.poll === 'string') {
+    const hasPoll = status.poll && typeof status.poll === 'string';
+
+    if (hasPoll) {
       output.push(<Poll id={status.poll} key='poll' status={status.url} />);
     }
 
-    return <>{output}</>;
+    return <div className={classNames({ 'bg-gray-100 rounded-md p-4': hasPoll })}>{output}</div>;
   } else {
     const output = [
       <div

app/soapbox/features/compose/components/poll-form.tsx

@@ -140,7 +140,12 @@ const PollForm = (props: IPollForm) => {
   const maxOptions = pollLimits.get('max_options');
   const maxOptionChars = pollLimits.get('max_characters_per_option');
 
-  const handleAddOption = () => onAddOption('');
+  const handleAddOption = () => {
+    // autofocus on new input
+    // use streamfield
+    onAddOption('');
+  };
+
   const handleSelectDuration = (value: number) => onChangeSettings(value, isMultiple);
   const handleToggleMultiple = () => onChangeSettings(expiresIn, !isMultiple);
 
@@ -170,7 +175,6 @@ const PollForm = (props: IPollForm) => {
           {options.size < maxOptions && (
             <Button
               theme='secondary'
-              icon={require('@tabler/icons/icons/plus.svg')}
               onClick={handleAddOption}
               size='sm'
             >