fix(log): vc-cmd-clear-btn layout on iOS

Tencent · Sep 9, 2022 · 96422fb · 96422fb
1 parent f3aaff5
commit 96422fb
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 16 deletions.
diff --git a/src/log/logCommand.less b/src/log/logCommand.less
@@ -17,7 +17,8 @@
 
 // input or textarea
 .vc-cmd-input-wrap {
-  display: block;
+  display: flex;
+  align-items: center;
   position: relative;
   height: (28em / @font);
   margin-right: (40em / @font);
@@ -52,12 +53,8 @@
   font-size: 1em;
 }
 .vc-cmd-clear-btn {
-  position: absolute;
+  flex: 1 (40em / @font);
   text-align: center;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: (40em / @font);
   line-height: (40em / @font);
 }
 .vc-cmd-btn:active,

diff --git a/src/log/logCommand.svelte b/src/log/logCommand.svelte
@@ -236,11 +236,6 @@
   </ul>
 
   <div class="vc-cmd-input-wrap">
-    {#if cmdValue.length > 0}
-      <div class="vc-cmd-clear-btn" on:click|preventDefault={() => onTapClearText('cmd')}>
-        <Icon name="clear" />
-      </div>
-    {/if}
     <textarea
       class="vc-cmd-input"
       placeholder="command..."
@@ -251,22 +246,27 @@
       on:focus={onCmdFocus}
       on:blur={onCmdBlur}
     ></textarea>
+    {#if cmdValue.length > 0}
+    <div class="vc-cmd-clear-btn" on:click|preventDefault={() => onTapClearText('cmd')}>
+      <Icon name="clear" />
+    </div>
+  {/if}
   </div>
 </form>
 
 <form class="vc-cmd vc-filter" on:submit|preventDefault={onFilterSubmit}>
   <button class="vc-cmd-btn" type="submit">Filter</button>
   <ul class='vc-cmd-prompted'></ul>
   <div class="vc-cmd-input-wrap">
-    {#if filterValue.length > 0}
-      <div class="vc-cmd-clear-btn" on:click|preventDefault={() => onTapClearText('filter')}>
-        <Icon name="clear" />
-      </div>
-    {/if}
     <textarea
       class="vc-cmd-input"
       placeholder="filter..."
       bind:value={filterValue}
     ></textarea>
+    {#if filterValue.length > 0}
+    <div class="vc-cmd-clear-btn" on:click|preventDefault={() => onTapClearText('filter')}>
+      <Icon name="clear" />
+    </div>
+  {/if}
   </div>
 </form>