Make Backlog Header form responsive

Display on multiple lines on smaller viewports.

Author: myabc

frontend/src/assets/sass/backlogs/_master_backlog.sass

@@ -86,3 +86,9 @@ $op-backlogs-header--points-min-width: 5rem
   align-self: start // Align to top of second row
   word-wrap: break-word
   overflow-wrap: break-word
+
+@media screen and (min-width: $breakpoint-sm)
+  .op-backlogs-header-form
+    .FormControl-spacingWrapper
+      flex-direction: row
+      column-gap: 0.5rem

modules/backlogs/app/components/backlogs/backlog_header_component.html.erb

@@ -50,7 +50,8 @@
       primer_form_with(
         url: backlogs_project_sprint_path(project, sprint),
         model: sprint,
-        method: :patch
+        method: :patch,
+        class: "op-backlogs-header-form"
       ) do |f|
         render(Backlogs::BacklogHeaderForm.new(f, cancel_path: show_name_backlogs_project_sprint_path(project, sprint)))
       end

modules/backlogs/app/forms/backlogs/backlog_header_form.rb

@@ -33,35 +33,37 @@ class BacklogHeaderForm < ApplicationForm
     attr_reader :cancel_path
 
     form do |f|
-      f.group(layout: :horizontal) do |group|
-        group.text_field(
-          name: :name,
-          label: attribute_name(:name),
-          placeholder: attribute_name(:name),
-          visually_hide_label: true,
-          autofocus: true,
-          autocomplete: "off"
-        )
+      f.text_field(
+        name: :name,
+        label: attribute_name(:name),
+        placeholder: attribute_name(:name),
+        visually_hide_label: true,
+        autofocus: true,
+        autocomplete: "off"
+      )
 
-        group.single_date_picker(
+      f.group(layout: :horizontal) do |dates|
+        dates.single_date_picker(
           name: :start_date,
           label: attribute_name(:start_date),
           placeholder: attribute_name(:start_date),
           visually_hide_label: true,
           leading_visual: { icon: :calendar },
           datepicker_options: {}
         )
-        group.single_date_picker(
+        dates.single_date_picker(
           name: :effective_date,
           label: attribute_name(:effective_date),
           placeholder: attribute_name(:effective_date),
           visually_hide_label: true,
           leading_visual: { icon: :calendar },
           datepicker_options: {}
         )
+      end
 
-        group.submit(scheme: :primary, name: :submit, label: I18n.t(:button_save))
-        group.button(
+      f.group(layout: :horizontal) do |buttons|
+        buttons.submit(scheme: :primary, name: :submit, label: I18n.t(:button_save))
+        buttons.button(
           scheme: :secondary,
           name: :cancel,
           label: I18n.t(:button_cancel),