Fix .form-control padding for date/time inputs

[WinterSilence]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Some browsers (for example, FF and Chrome) add extra "padding" to date/time inputs when calculate area of visible text. As result, part of text is hide:

Need fix padding-right:

[type="date"].form-control,
[type="time"].form-control,
[type="datetime"].form-control,
[type="datetime-local"].form-control {
    padding-right: ...;
}

+ same fixes for .form-control-sm and .form-control-lg

Reduced test cases

[type="date"].form-control {
    width: 8rem;
}
[type="date"].form-control-sm {
    width: 7rem;
}
[type="time"].form-control {
    width: 5rem;
}
[type="time"].form-control-sm {
    width: 4.5rem;
}
[type="datetime"].form-control,
[type="datetime-local"].form-control {
    width: 11.5rem;
}
[type="datetime"].form-control-sm,
[type="datetime-local"].form-control-sm {
    width: 10.5rem;
}

<input type="datetime-local" name="from" class="form-control" value="2022-12-28 13:30">
<input type="time" name="to" class="form-control" value="13:30">
<input type="datetime-local" name="from" class="form-control form-control-sm" value="2022-12-28 13:30">
<input type="time" name="to" class="form-control form-control-sm" value="13:30">
<input type="datetime-local" name="from" class="form-control form-control-lg" value="2022-12-28 13:30">
<input type="time" name="to" class="form-control form-control-lg" value="13:30">

What operating system(s) are you seeing the problem on?

Windows, macOS, Android, iOS, Linux

What browser(s) are you seeing the problem on?

Chrome, Firefox

What version of Bootstrap are you using?

v.5.*

[divyasakre]

Hi! I am new to the open source, I want to contribute and fix this frontend issue.

take

[Hamzaansari15]

Hi! I am new to the open source, I want to contribute and fix this frontend issue.