How to change the search form width

I have been investigating this further with the limited knowledge I have. I find that when I inspect the element it refers to:

So I would think that I can change the attributes for the input text field in input.html.twig.
I do however have no clue of the syntax that I should use in that file to change the size of the input text field.

I have been searching for examples on-line but have not found anything that explains or shows examples of the syntax to use

Help on this would be appreciated.
Greetings,
Rob

Hi there,
I see this request has been marked as fixed.
I see in the changes that there is a reference to the following in z_style.css

.block-search input {
box-sizing: border-box;
width: 100%;
}

So if that is to solve my problem that the seach form input would be resized then I don't believe that fixes my problem yet.
I am using the Search API module and the enabled block for the search form shows in a block in the right sidebar.
When I choose wide it fits but if I choose normal the search form doesn't fit. I have attached a new screenshot.
I have tried to update my custom css file with a width of 50% for the entry block.search input but if I do so nothing happens.

I hope it is possible to update the theme so the Search API form can be used in a smaller block than normal.
Greetings,
Rob

I have now updated the site from drupal 10 to 11 but there it is the same. So I now have everything at the latest version including zero point at v8.x-1.24
If I inspect the input field it comes up as:

input data-drupal-selector="edit-keys" type="text" id="edit-keys--2" name="keys" value="virtual desktop" size="30" maxlength="128" class="form-text"

I have attched a screenshot of this

Maybe this is something that is not an issue with the theme but maybe with the search API module? Or something else?
If it's not with the theme I hope you can point me in the right direction

I am sorry, I don't get you. Do you applied the lines in custom_css:
.block-search input {
box-sizing: border-box;
width: 100%;
}
... or use the development version: 8.x-1.x-dev ?

If so, refresh browser's cache and see if it solve your problem.
Please see the attached image.

Hello Florian,
Thanks for your prompt reply.
I believe the problem only exists with the Search API module. Is the screenshot you attached from a site with the core search module enabled? Because on another site where I use the default search module I don't have a problem because the default search module uses a text box with size="15" and Search API use a text box with size="30".
So in the end I don't think it is a theme problem?

It is how I explained in my initial description, so if it is indeed not something that will be fixed in the theme I will create an issue for the Search API.

I have installed the dev version, tried with the addition in custom-styles.css and cleared caches. But that doesn't help. I have added another screenshot.
Greetings,
Rob

The new CSS code in my theme resolves the core "size" issue. It doesn't matter size=15 or 30. A a rule, after theme update, especially CSS, you should clear browser's cache with "CTRL+F5".

Hello Florian.
Thanks for diving into this issue.
I can confirm that the code you just shared via email works:

#sidebar-left input.form-text,
#sidebar-right input.form-text,
.block-search input {
box-sizing: border-box;
width: 100%;
}

I have tested this with my main site that runs Drupal 10.4 with Zeropoint 8.x-1.24 and the SearchAPI module 1.37 . When using the narrow or narrower right sidebar size the SearchAPI input text box fits into the placed block.

Great,
Thanks,
Rob