adjust dropdown spacing for mobile layout

Author: celinehuang

apps/dash-salesforce-crm/assets/s1.css

@@ -178,6 +178,14 @@ th {
   position: relative;
   border: 1px solid #f1f1f1;
 }
+.dd-styles {
+  border-radius: 5px;
+  background-color: white;
+  margin: 0.5rem;
+  padding-top: 7px;
+  position: relative;
+  border: 1px solid #f1f1f1;
+}
 .tabs > a {
   text-decoration: none;
   color: #333333;
@@ -226,6 +234,14 @@ table {
   background: transparent; /* Optional: just make scrollbar invisible */
 }
 
+.has-value.Select--single > .Select-control .Select-value .Select-value-label,
+.has-value.is-pseudo-focused.Select--single
+  > .Select-control
+  .Select-value
+  .Select-value-label {
+  color: #848484;
+}
+
 #cases_reasons {
   height: 100%;
 }
@@ -239,7 +255,7 @@ table {
 
 @media (max-width: 450px) {
   .dropdown-styles {
-    width: 25% !important;
+    width: 28% !important;
     display: inline-block !important;
   }
   .app-title {
@@ -299,6 +315,10 @@ table {
     width: 30%;
     display: inline-block;
   }
+  .dd-styles {
+    width: 44%;
+    display: inline-block;
+  }
   .indicator_value {
     font-size: 1.5rem;
   }

apps/dash-salesforce-crm/panels/leads.py

@@ -319,7 +319,7 @@ def modal():
         id="lead_grid",
         children=[
             html.Div(
-                className="two columns dropdown-styles",
+                className="two columns dd-styles",
                 children=dcc.Dropdown(
                     id="converted_leads_dropdown",
                     options=[
@@ -332,7 +332,7 @@ def modal():
                 ),
             ),
             html.Div(
-                className="two columns dropdown-styles",
+                className="two columns dd-styles",
                 children=dcc.Dropdown(
                     id="lead_source_dropdown",
                     options=[