With the latest version of Amelia, as of this comment (4.6), it is extremely difficult to select date of birth with the calendar selector popup on mobile. It's completely impossible on desktop as I cannot even see the traverse buttons. See examples below.

We should be given the option to type in the date.

Mobile

Desktop

Yes, I'm also having the exact same issue. The D.O.B. selector in the Client Panel is being partially hidden by the top bar. Can you release a fix as soon as possible?

Thank you.

Hi Uroš,

The site is not launched yet and it's due for launch this week, so unfortunately, I cannot provide you with those details as there is a freeze on Prod and Stage changes. 

This issue is with the latest version of Amelia, as you can see Christian is having the same issue, I'm sure many others are as well but they don't realise it.

Please check on your own Amelia instance, you should see the same issue.

This looks like an easy CSS fix, but as per my initial message - why is the d.o.b field only a date selector? It should be at least a date selector with the ability to also type in the date. Thus avoiding UI issues with responsiveness, such as the one I've spotted.

To prove that this is a global Amelia plugin UI issue, I have also just checked one of your demo sites:
https://sports.wpamelia.com/customer-panel/

As you can see below, the exact same issue is present on your demo site.

The problem is your popover element, it overlaps the container for the client panel.
Inspecting the source code, I tried setting the z-index by adding the following CSS in WordPress customiser:

div.popover-origin {
    position: absolute;
    z-index: 9998!important;
}

I did this to hopefully help bring the element to front, but it did not work.
In general, div.popover-origin seems to work, as I can set background color.

I don't have enough time to be digging into the HTML and writing CSS but you guys have enough information now that shows it's a global issue.

Please look into this from your end and add a fix to your next release.

Excellent, thank you Uroš! The CSS works as expected.

Desktop

I also noticed the mobile version has padding-left: 0; set for the titling, this makes the Details title look bad on mobile:

I've also added this CSS to fix that issue - it adds 20px padding to left and right of the title area:

@media only screen and (max-width: 991px) {
    .amelia-app-booking #am-cabinet .am-cabinet-dashboard .am-cabinet-content .am-cabinet-profile .el-tabs__nav-scroll {
            padding: 0px 20px 0px 20px !important;
    }
}

To make everything simple for anyone else - just add the following CSS code to your customiser:

/* Amelia panel fix */
.amelia-app-booking #am-cabinet .am-cabinet-dashboard .am-cabinet-content .am-cabinet-profile .el-tabs__content {
    height: auto !important;
    min-height: 400px !important;
    padding: 40px !important;
    overflow: visible !important;
}
.v-calendar-column .el-form-item {
    display: flex !important;
    flex-direction: column !important;
}
.el-form-item__content .popover-origin{
       transform: unset !important;
        left: unset !important;
}
@media only screen and (max-width: 991px) {
    .amelia-app-booking #am-cabinet .am-cabinet-dashboard .am-cabinet-content .am-cabinet-profile .el-tabs__nav-scroll {
            padding: 0px 20px 0px 20px !important;
    }
}

This can now be closed.

Amazing! Thank you, guys.