refine state search style

Author: Jicheng Lu

src/routes/page/conversation/+page.svelte

@@ -374,8 +374,12 @@
 				</div>
 			</CardBody>
 			{#if showStateSearch}
-				<CardBody class="border-bottom" style="display: flex; justify-content: flex-end;">
-					<StateSearch bind:states={states} onSearch={q => handleStateSearch(q)}/>
+				<CardBody class="border-bottom">
+					<Row class="g-3 justify-content-end">
+						<Col lg="6">
+							<StateSearch bind:states={states} onSearch={q => handleStateSearch(q)}/>
+						</Col>
+					</Row>
 				</CardBody>
 			{/if}
 			<CardBody class="border-bottom">

src/routes/page/conversation/state-search.svelte

@@ -36,15 +36,15 @@
 >
     {#each states as state, idx}
         <div class="state-search-item">
-            <div>
+            <div style="flex: 1;">
                 <RemoteSearchInput
                     bind:value={state.key}
                     maxLength={maxLength}
                     onSearch={e => onSearch(e)}
                     placeholder="Search States"
                 />
             </div>
-            <div>
+            <div style="flex: 1;">
                 <Input
                     type="text"
                     bind:value={state.value}
@@ -67,15 +67,16 @@
         </div>
     {/each}
     {#if states.length < limit}
-    <div>
-        <Button 
-            color="link"
-            style="padding-left: 0px;"
-            on:click={() => addState()}
-        >
-            Add +
-        </Button>
-    </div>
+        <div class="d-flex justify-content-end">
+            <Button 
+                color="link"
+                style="padding-left: 0px;"
+                on:click={() => addState()}
+            >
+                Add +
+            </Button>
+            <div style="flex: 0 0 13px;"></div>
+        </div>
     {/if}
 </div>