smoothing also the mobile view

Author: jycouet

app/components/Package/TrendsChart.vue

@@ -1584,14 +1584,15 @@ watch(selectedMetric, value => {
     :aria-busy="activeMetricState.pending ? 'true' : 'false'"
   >
     <div class="w-full mb-4 flex flex-col gap-3">
-      <div class="flex flex-col sm:flex-row gap-3 sm:gap-2 sm:items-end">
+      <div class="grid grid-cols-2 sm:flex sm:flex-row gap-3 sm:gap-2 sm:items-end">
         <SelectField
           v-if="showFacetSelector"
           id="trends-metric-select"
           v-model="selectedMetric"
           :disabled="activeMetricState.pending"
           :items="METRICS.map(m => ({ label: m.label, value: m.id }))"
           :label="$t('package.trends.facet')"
+          block
         />
 
         <SelectField
@@ -1600,9 +1601,10 @@ watch(selectedMetric, value => {
           v-model="selectedGranularity"
           :disabled="activeMetricState.pending"
           :items="granularityItems"
+          block
         />
 
-        <div class="grid grid-cols-2 gap-2 flex-1">
+        <div class="col-span-2 sm:col-span-1 grid grid-cols-2 gap-2 flex-1">
           <div class="flex flex-col gap-1">
             <label
               for="startDate"
@@ -1672,7 +1674,7 @@ watch(selectedMetric, value => {
           />
           {{ $t('package.trends.data_correction') }}
         </button>
-        <div v-if="showCorrectionControls" class="flex items-end gap-3">
+        <div v-if="showCorrectionControls" class="grid grid-cols-2 sm:flex items-end gap-3">
           <label class="flex flex-col gap-1 flex-1">
             <span class="text-2xs font-mono text-fg-subtle tracking-wide uppercase">
               {{ $t('package.trends.average_window') }}