fix(ui): correct responsive breakpoints for inbound form and settings

InboundFormModal forms specified label/wrapper cols only at md
(>=768), leaving 576-767 unset and breaking the grid in that range.
Move the breakpoint down to sm so the desktop 8/14 split applies
from 576 upward.

SettingListItem had its breakpoints inverted: at <992 no span was
set so the meta and control cols squeezed side-by-side, and at lg
(992-1199) they stacked. Switch to xs/lg so input stacks below the
text under 992 and sits beside it from 992 upward.

frontend/src/components/SettingListItem.vue

@@ -17,13 +17,13 @@ const padding = computed(() =>
 <template>
   <a-list-item :style="{ padding }">
     <a-row :gutter="[8, 16]">
-      <a-col :lg="24" :xl="12">
+      <a-col :xs="24" :lg="12">
         <a-list-item-meta>
           <template #title><slot name="title" /></template>
           <template #description><slot name="description" /></template>
         </a-list-item-meta>
       </a-col>
-      <a-col :lg="24" :xl="12">
+      <a-col :xs="24" :lg="12">
         <slot name="control" />
       </a-col>
     </a-row>