ui: remove jiggle from Login page items (aws#4864)

There was previously a jiggle when moving the mouse on the
items since all border sizes were not the same.

Solution:

Make a single css class with the base item properties so that
regardless of state they all share the same border width.

Then the stateful classes like hover or selected will only change
what they need to change.

Signed-off-by: Nikolas Komonen <[email protected]>

Author: nkomonen-amazon

packages/core/src/login/webview/vue/selectableItem.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        class="item-container"
+        class="item-container-base"
         :class="{ selected: isSelected, hovering: isHovering }"
         @click="toggleSelection"
         @mouseover="isHovering = true"
@@ -95,23 +95,21 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.item-container {
+.item-container-base {
     padding: 5px;
     display: flex;
-}
-
-.item-container {
-    border: 1px solid #625f5f;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #625f5f;
+    user-select: none;
 }
 
 .hovering {
-    border: 2px solid #0e639c;
-    user-select: none;
+    border-color: #0e639c;
 }
 
 .selected {
-    border: 1px solid #3675f4;
-    user-select: none;
+    border-color: #3675f4;
 }
 
 .title {