From ae90258942bcc023b0b8ef82f73ae388762392de Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Wed, 22 May 2024 16:49:37 -0500
Subject: [PATCH] widgets: Extend flexbox to widget inputs, buttons.

---
 web/styles/widgets.css | 49 ++++++++++++++++++++++++++----------------
 1 file changed, 30 insertions(+), 19 deletions(-)

diff --git a/web/styles/widgets.css b/web/styles/widgets.css
index 05fcf3efd1..8475b68ad5 100644
--- a/web/styles/widgets.css
+++ b/web/styles/widgets.css
@@ -23,12 +23,23 @@
 }
 
 .todo-widget {
+    .todo-task-list-title-bar {
+        display: flex;
+        gap: 5px;
+    }
+
+    .add-task-bar {
+        display: flex;
+        /* Ensure controls remain visible on narrower screens. */
+        flex-flow: row wrap;
+        gap: 5px;
+    }
+
     /* For the box-shadow to be visible on the left */
     .add-task,
     .add-desc {
         font-size: 14px;
         font-weight: 400;
-        margin-right: 4px;
     }
 
     & label.checkbox {
@@ -102,16 +113,10 @@
         padding: 0;
     }
 
-    & input {
-        &.poll-question,
-        &.poll-option,
-        &.add-task,
-        &.add-desc {
-            width: 206px;
-        }
-    }
-
     & input[type="text"] {
+        /* Reset from zulip.css */
+        height: unset;
+
         border: 1px solid hsl(0deg 0% 80%);
         box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
         transition:
@@ -130,13 +135,15 @@
 }
 
 .poll-widget {
-    .poll-option {
-        font-weight: 400;
+    .poll-option-bar {
+        display: flex;
+        /* Ensure controls remain visible on narrower screens. */
+        flex-flow: row wrap;
+        gap: 5px;
     }
 
-    /* For the box-shadow to be visible on the left */
-    & input.poll-option {
-        margin-right: 4px;
+    .poll-option {
+        font-weight: 400;
     }
 
     & span.poll-option {
@@ -189,7 +196,8 @@ button {
     &.poll-option {
         color: hsl(156deg 41% 40%);
         border: 1px solid hsl(156deg 28% 70%);
-        width: 100px;
+        width: max-content;
+        flex: 0 0 auto;
         border-radius: 3px;
         background-color: hsl(0deg 0% 100%);
         padding: 4px;
@@ -211,15 +219,18 @@ button {
     }
 }
 
-input,
-button {
+input {
     &.add-task,
     &.add-desc,
     &.poll-option,
     &.poll-question,
     &.todo-task-list-title {
+        flex: 1 1 auto;
         padding: 4px 6px;
-        margin: 2px 0;
+    }
+
+    &.todo-task-list-title {
+        flex: 0 0 auto;
     }
 }