update desktop resize

src/components/TokenInput.vue

@@ -1,20 +1,31 @@
 <template>
 	<div class="token-input">
 		<div class="sarcrifice-from-input">
-			<input @input="emit('update:modelValue', $event.target.value)" :value="props.modelValue" :placeholder="0" />
-			<div class="sacrifice-logo" v-if="props.logo">
-				<img :src="props.logo" alt="vampir" />
+			<div class="left-side">
+				<input
+					@input="emit('update:modelValue', $event.target.value)"
+					:value="props.modelValue"
+					:placeholder="0"
+				/>
+				<div class="value-adder">
+					<slot class="value-adder" name="message"></slot>
+					<slot name="message-end"></slot>
+				</div>
 			</div>
-		</div>
+			<div class="right-side">
+				<token-logo :img="props.logo" :alt="'vampir'"></token-logo>
 
-		<div class="value-adder">
-			<slot class="value-adder" name="message"></slot>
-			<slot name="message-end"></slot>
+				<!-- <div class="sacrifice-logo" v-if="props.logo">
+					<img :src="props.logo" alt="vampir" />
+				</div> -->
+			</div>
 		</div>
 	</div>
 </template>
 
 <script setup>
+import TokenLogo from "@/components/TokenLogo.vue";
+
 const props = defineProps({
 	modelValue: [String, Number],
 	logo: String,
@@ -27,38 +38,46 @@ const emit = defineEmits(["update:modelValue"]);
 .sarcrifice-from-input
     display: flex
     margin-bottom: 8px
-    @media (min-width: 992px)
-        height: 60px
-    input
-        width: 100%
-        height: 45px
-        font-size: 24px
-        border-radius: 16px
-        padding: 0 16px
-        @media (min-width: 992px)
-            font-size: 24px
-            height: auto
-    .sacrifice-logo
-        margin-left: 16px
-        img
-            width: 45px
-            height: 45px
-            border-radius: 50%
-            pointer-events: none
-            @media (min-width: 992px)
-                height: 100%
-                width: auto
-.value-adder
-    display: flex
     gap: 8px
-    .stake-adder-step
-        padding: 4px 16px
-        color: var(--black)
-        font-size: 14px
-        border-width: 1px
-        border-color: transparent
-        border-style: solid
-        &:hover,&:active, &:focus
-            background-color: var(--grey-light)
-            cursor: pointer
+    .left-side
+        display: flex
+        flex-direction: column
+        gap: 12px
+        flex: 1 1 auto
+        input
+            width: 100%
+            height: 45px
+            font-size: 24px
+            border-radius: 16px
+            padding: 0 16px
+            @media (min-width: 992px)
+                font-size: 24px
+        .value-adder
+            display: flex
+            gap: 8px
+            .stake-adder-step
+                padding: 4px 16px
+                color: var(--black)
+                font-size: 14px
+                border-width: 1px
+                border-color: transparent
+                border-style: solid
+                &:hover,&:active, &:focus
+                    background-color: var(--grey-light)
+                    cursor: pointer
+    .right-side
+        display: flex
+        flex-direction: column
+        height: 45px
+        .sacrifice-logo
+            margin-left: 16px
+            height: 45px
+            img
+                width: 45px
+                height: 45px
+                border-radius: 50%
+                pointer-events: none
+                @media (min-width: 992px)
+                    height: 100%
+                    width: auto
 </style>