From 673dea78ec321d3d93b12da36af2d20bbb8ea5b9 Mon Sep 17 00:00:00 2001
From: Aaron Plave <aaron.plave@jpl.nasa.gov>
Date: Tue, 11 Jun 2024 10:14:28 -0700
Subject: [PATCH] Style fixes

---
 src/components/form/Input.svelte              |  3 +
 .../model/ModelAssociationsListItem.svelte    | 71 +++++++++----------
 .../scheduling/goals/SchedulingGoal.svelte    |  9 ++-
 src/routes/plans/+page.svelte                 |  2 +-
 src/routes/tags/+page.svelte                  |  2 +-
 5 files changed, 45 insertions(+), 42 deletions(-)

diff --git a/src/components/form/Input.svelte b/src/components/form/Input.svelte
index fef37f7b16..63cc49d409 100644
--- a/src/components/form/Input.svelte
+++ b/src/components/form/Input.svelte
@@ -170,7 +170,10 @@
 
   .input > .left,
   .input > .right {
+    align-items: center;
     cursor: default;
+    display: flex;
+    height: 100%;
     position: absolute;
   }
 
diff --git a/src/components/model/ModelAssociationsListItem.svelte b/src/components/model/ModelAssociationsListItem.svelte
index cc199d274d..f4c4316e59 100644
--- a/src/components/model/ModelAssociationsListItem.svelte
+++ b/src/components/model/ModelAssociationsListItem.svelte
@@ -8,7 +8,6 @@
   import { getTarget } from '../../utilities/generic';
   import { permissionHandler } from '../../utilities/permissionHandler';
   import { tooltip } from '../../utilities/tooltip';
-  import Input from '../form/Input.svelte';
 
   export let hasEditPermission: boolean = false;
   export let isSelected: boolean = false;
@@ -121,42 +120,40 @@
   <div class="inputs-container">
     {#if priority !== undefined}
       <div class="priority-container">
-        <Input>
-          <input
-            bind:this={priorityInput}
-            bind:value={priority}
-            class="st-input"
-            min="0"
-            style:width="68px"
-            type="number"
-            on:change={onUpdatePriority}
-            on:keydown={onKeyDown}
-            use:permissionHandler={{
-              hasPermission: hasEditPermission,
-              permissionError,
-            }}
-          />
-          {#if hasEditPermission}
-            <div class="priority-buttons">
-              <button
-                use:tooltip={{ content: 'Increase Priority', placement: 'top' }}
-                class="st-button tertiary up-button"
-                class:hidden={upButtonHidden}
-                tabindex={upButtonHidden ? -1 : 0}
-                on:click={onIncreasePriority}
-              >
-                <CaretUpFillIcon />
-              </button>
-              <button
-                use:tooltip={{ content: 'Decrease Priority', placement: 'top' }}
-                class="st-button tertiary down-button"
-                on:click={onDecreasePriority}
-              >
-                <CaretDownFillIcon />
-              </button>
-            </div>
-          {/if}
-        </Input>
+        <input
+          bind:this={priorityInput}
+          bind:value={priority}
+          class="st-input"
+          min="0"
+          style:width="68px"
+          type="number"
+          on:change={onUpdatePriority}
+          on:keydown={onKeyDown}
+          use:permissionHandler={{
+            hasPermission: hasEditPermission,
+            permissionError,
+          }}
+        />
+        {#if hasEditPermission}
+          <div class="priority-buttons">
+            <button
+              use:tooltip={{ content: 'Increase Priority', placement: 'top' }}
+              class="st-button tertiary up-button"
+              class:hidden={upButtonHidden}
+              tabindex={upButtonHidden ? -1 : 0}
+              on:click={onIncreasePriority}
+            >
+              <CaretUpFillIcon />
+            </button>
+            <button
+              use:tooltip={{ content: 'Decrease Priority', placement: 'top' }}
+              class="st-button tertiary down-button"
+              on:click={onDecreasePriority}
+            >
+              <CaretDownFillIcon />
+            </button>
+          </div>
+        {/if}
       </div>
     {/if}
     <select
diff --git a/src/components/scheduling/goals/SchedulingGoal.svelte b/src/components/scheduling/goals/SchedulingGoal.svelte
index 89db2eba36..a58954166e 100644
--- a/src/components/scheduling/goals/SchedulingGoal.svelte
+++ b/src/components/scheduling/goals/SchedulingGoal.svelte
@@ -13,7 +13,6 @@
   import { tooltip } from '../../../utilities/tooltip';
   import Collapse from '../../Collapse.svelte';
   import ContextMenuItem from '../../context-menu/ContextMenuItem.svelte';
-  import Input from '../../form/Input.svelte';
   import SchedulingGoalAnalysesActivities from './SchedulingGoalAnalysesActivities.svelte';
   import SchedulingGoalAnalysesBadge from './SchedulingGoalAnalysesBadge.svelte';
 
@@ -121,7 +120,7 @@
     <svelte:fragment slot="right">
       <div class="right-content" role="none" on:click|stopPropagation>
         <SchedulingGoalAnalysesBadge analyses={goal.analyses} {enabled} />
-        <Input>
+        <div class="priority-container">
           <input
             bind:this={schedulingGoalInput}
             bind:value={priority}
@@ -157,7 +156,7 @@
               </button>
             </div>
           {/if}
-        </Input>
+        </div>
         <select
           class="st-select"
           value={goalPlanSpec.goal_revision}
@@ -290,6 +289,10 @@
     color: var(--st-gray-60);
   }
 
+  .priority-container {
+    display: flex;
+  }
+
   .down-button {
     margin-left: -3px;
     margin-right: 2px;
diff --git a/src/routes/plans/+page.svelte b/src/routes/plans/+page.svelte
index 6feacca6bd..e148105934 100644
--- a/src/routes/plans/+page.svelte
+++ b/src/routes/plans/+page.svelte
@@ -563,7 +563,7 @@
           <PlanIcon />
           Plans
         </SectionTitle>
-        <Input>
+        <Input layout="inline">
           <input bind:value={filterText} class="st-input" placeholder="Filter plans" style="width: 300px" />
         </Input>
       </svelte:fragment>
diff --git a/src/routes/tags/+page.svelte b/src/routes/tags/+page.svelte
index eb3d767a78..4375212487 100644
--- a/src/routes/tags/+page.svelte
+++ b/src/routes/tags/+page.svelte
@@ -432,7 +432,7 @@
           <TagsIcon />
           Tags
         </SectionTitle>
-        <Input>
+        <Input layout="inline">
           <input bind:value={filterText} class="st-input" placeholder="Filter tags" style="width: 300px" />
         </Input>
       </svelte:fragment>