diff --git a/web/styles/widgets.css b/web/styles/widgets.css
index 1c7d11d822..98845c534e 100644
--- a/web/styles/widgets.css
+++ b/web/styles/widgets.css
@@ -24,8 +24,12 @@
 
 .todo-widget {
     .todo-task-list-title-bar {
+        flex: 1 1 auto;
         display: flex;
+        /* Ensure controls remain visible on narrower screens. */
+        flex-flow: row wrap;
         gap: 5px;
+        margin-bottom: var(--markdown-interelement-space-px);
     }
 
     .add-task-bar {
@@ -233,13 +237,9 @@ input {
     &.poll-option,
     &.poll-question,
     &.todo-task-list-title {
-        flex: 1 1 auto;
+        flex: 1 0 auto;
         padding: 4px 6px;
     }
-
-    &.todo-task-list-title {
-        flex: 0 0 auto;
-    }
 }
 
 .widget-error {
@@ -251,8 +251,11 @@ input {
 .poll-question-remove,
 .todo-task-list-title-check,
 .todo-task-list-title-remove {
-    width: 28px !important;
-    height: 28px;
+    align-self: stretch;
+    /* TODO: Re-express the 30.5px value here
+       as part of information density work. */
+    flex: 0 0 30.5px;
+    min-height: 30.5px;
     border-radius: 3px;
     border: 1px solid hsl(0deg 0% 80%);
     background-color: hsl(0deg 0% 100%);
@@ -265,17 +268,26 @@ input {
 .poll-edit-question,
 .todo-edit-task-list-title {
     opacity: 0.4;
-    display: inline-block;
-    margin-left: 5px;
 
     &:hover {
         opacity: 1;
     }
 }
 
-.poll-question-header,
-.todo-task-list-title-header {
-    display: inline;
+.poll-question-bar {
+    flex: 1 1 auto;
+    display: flex;
+    /* Ensure controls remain visible on narrower screens. */
+    flex-flow: row wrap;
+    gap: 5px;
+    margin-bottom: var(--markdown-interelement-space-px);
+}
+
+.poll-widget-header-area,
+.todo-widget-header-area {
+    display: flex;
+    align-items: baseline;
+    gap: 5px;
 }
 
 .current-user-vote {
diff --git a/web/templates/widgets/poll_widget.hbs b/web/templates/widgets/poll_widget.hbs
index a1badc2c9c..902c745dac 100644
--- a/web/templates/widgets/poll_widget.hbs
+++ b/web/templates/widgets/poll_widget.hbs
@@ -1,14 +1,16 @@
 <div class="poll-widget">
-    <h4 class="poll-question-header"></h4>
+    <div class="poll-widget-header-area">
+        <h4 class="poll-question-header"></h4>
+        <i class="fa fa-pencil poll-edit-question"></i>
+        <div class="poll-question-bar">
+            <input type="text" class="poll-question" placeholder="{{t 'Add question'}}" />
+            <button class="poll-question-remove"><i class="fa fa-remove"></i></button>
+            <button class="poll-question-check"><i class="fa fa-check"></i></button>
+        </div>
+    </div>
     <div class="poll-please-wait">
         {{t 'We are about to have a poll.  Please wait for the question.'}}
     </div>
-    <i class="fa fa-pencil poll-edit-question"></i>
-    <div class="poll-question-bar">
-        <input type="text" class="poll-question" placeholder="{{t 'Add question'}}" />
-        <button class="poll-question-remove"><i class="fa fa-remove"></i></button>
-        <button class="poll-question-check"><i class="fa fa-check"></i></button>
-    </div>
     <div class="poll-author-help">
         {{t 'Tip: You can also send "/poll Some question"'}}
     </div>
diff --git a/web/templates/widgets/todo_widget.hbs b/web/templates/widgets/todo_widget.hbs
index 339519bbaf..b6a66cbc53 100644
--- a/web/templates/widgets/todo_widget.hbs
+++ b/web/templates/widgets/todo_widget.hbs
@@ -1,10 +1,12 @@
 <div class="todo-widget">
-    <h4 class="todo-task-list-title-header">{{t "Task list" }}</h4>
-    <i class="fa fa-pencil todo-edit-task-list-title"></i>
-    <div class="todo-task-list-title-bar">
-        <input type="text" class="todo-task-list-title" placeholder="{{t 'Add todo task list title'}}" />
-        <button class="todo-task-list-title-remove"><i class="fa fa-remove"></i></button>
-        <button class="todo-task-list-title-check"><i class="fa fa-check"></i></button>
+    <div class="todo-widget-header-area">
+        <h4 class="todo-task-list-title-header">{{t "Task list" }}</h4>
+        <i class="fa fa-pencil todo-edit-task-list-title"></i>
+        <div class="todo-task-list-title-bar">
+            <input type="text" class="todo-task-list-title" placeholder="{{t 'Add todo task list title'}}" />
+            <button class="todo-task-list-title-remove"><i class="fa fa-remove"></i></button>
+            <button class="todo-task-list-title-check"><i class="fa fa-check"></i></button>
+        </div>
     </div>
     <ul class="todo-widget new-style">
     </ul>