How to increase search box width and center it when clicked

Store Design
1

Whenever I click my search bar, the search in box appears to be so small and cramped in the right,

What I want is, when clicked the search inbox should appear in the middle

Thank you, much appreciated

Please look at the video for reference.

And the code I used to move the search icon to the right is:

details-modal.header__search {
    position: absolute;
    top: 50%;
}

.header__icons {
    position: absolute;
    top: 50%;
}
@media screen and  (max-width: 989px) {
details-modal.header__search {
    position: relative;
    top: unset;
}

.header__icons {
    position: relative;
    top: unset;
}
}
2

@justauser

Kindly Share your Store URL,

So that i can help you.

3

@justauser

Could you provide me store URL? I should be able to answer your question.

Yours faithfully!

4

https://abbasi-e3ff.myshopify.com/

password: testingpage

5

https://abbasi-e3ff.myshopify.com/

password: testingpage

Thank you

6

@justauser

there is an by default features in dawn theme. you can try dawn theme.

Thank you