i can still see the same design for the footer

we can add tooltip - helper text, user will get an idea of what that icon is for.

Update the branch with main branch

I do see a great deal of improvement in how the header/footer is handle as I move between device emulators, this is much better. I am impressed that both landscape and portrait mode were taken into account.

I can see the footer icons just did not want to line up for you in some cases. Using a "grid" technique may help this be more consistent. Remember that you have Chota CSS in the background, and using the row and column classes can do a lot of this as well. It is OK as-is, just leaving this note.

Galaxy S20+

Galaxy S8

I notice a lot of whitespace changes where the tab index has been changed that should be cleaned up. If you look at your diff, then apply the "hide whitespace changes" settings and see it again, you'll see how much "unchanged" code is affected (it is significant).

Make sure to resolve the conflicts (I think the whitespace is involved here.) I have noted some links to update and some cleanup items inline. Just some cleanup stuff to think about polishing this up before taking it forward.