WIP: design optimization for mobile on radius field

src/app/search/components/criteria/cone-search-tab.component.html

@@ -14,6 +14,13 @@
         </button>
         <div class="row">
             <div class="col">
+                <div class="row">
+                    <div style="background:#c2c1c2;" class="col d-block d-sm-none">XS</div>
+                    <div style="background:#eec643;" class="col d-none d-sm-block d-md-none">SM</div>
+                    <div style="background:#f4ab42;" class="col d-none d-md-block d-lg-none">MD</div>
+                    <div style="background:#be0c02;" class="col d-none d-lg-block d-xl-none text-white">LG</div>
+                    <div style="background:#5f021f;" class="col d-none d-xl-block text-white">XL</div>
+                </div>
                 <div class="row pb-4">
                     <div class="col">
                         <app-resolver

src/app/search/components/criteria/cone-search/radius.component.css

+#radius-field {
+    width: 100px;
+}

src/app/search/components/criteria/cone-search/radius.component.html

@@ -10,9 +10,9 @@
             class="form-control-range mt-2"
             autocomplete="off">
     </div>
-    <div class="col-3 form-group mb-0">
+    <div class="col-auto form-group mb-0">
         <div class="input-group mt-4">
-            <input #rf type="number" class="form-control" [formControl]="radiusField" (input)="radiusChange(rf.value)" autocomplete="off">
+            <input #rf id="radius-field" type="number" class="form-control" [formControl]="radiusField" (input)="radiusChange(rf.value)" autocomplete="off">
             <div class="input-group-append">
                 <span class="input-group-text">arcsecond</span>
             </div>

src/app/search/components/criteria/cone-search/radius.component.ts

@@ -7,6 +7,7 @@ import { ConeSearch } from "../../../store/model";
 @Component({
     selector: 'app-radius',
     templateUrl: 'radius.component.html',
+    styleUrls: ['radius.component.css'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class RadiusComponent {