Refine production workspace layouts

web/src/pages/cities/Cities.tsx

@@ -24,13 +24,13 @@ export function Cities() {
         <div class="aggregator pageWorkspace">
             <div class="pageHeading"><div><span class="eyebrow">Historical observations</span><h1>City analysis</h1><p>Choose stations and a calculation, then compare the resulting values.</p></div><div class="selectionCount">{getCities().size} cities selected</div></div>
             <div class="container">
-                <aside class="column panel cityPanel">
+                <aside class="column cityPanel workspaceRail">
                     <h2>1. Choose cities</h2>
                     <SelectCity getCities={getCities} setCities={setCities} />
                 </aside>
-                <aside class="column panel queryPanel">
+                <aside class="column queryPanel workspaceToolbar">
                     <h2>2. Configure query</h2>
-                    <div>
+                    <div class="queryTimeRange">
                         <SelectTimeRange
                             getStart={getStart}
                             setStart={setStart}
@@ -38,8 +38,8 @@ export function Cities() {
                             setEnd={setEnd}
                         />
                     </div>
-                    <div>
-                        <div>
+                    <div class="queryOptions">
+                        <div class="queryField">
                             <h4>Select field</h4>
                             <SelectField getField={getField} setField={setField} />
                         </div>