GMail App - css does not get applied to the Mail App

I am seeing the same issue in the Facebook web app too

I can’t reproduce this. I’m getting the gmail webapp correctly themed and functional.
Is this something you can reproduce reliably? What if you delete the cache at ~/.local/share/webbrowser-app/.QtWebKit/ ?
Is this on a device or on desktop?

On a Nexus 4 - will try your suggestion - although have done several re-installs

Ok deleted the cache folder - same result, also rebooted

I can confirm. This is because of the user-agent string.
Add this to the end of ua-overrides.js file and you'll see gmail like it should be seen

 "mail.google.com" : "Mozilla/5.0 (Ubuntu; Linux; Android 4.2.2) AppleWebKit/537.21 Mobile Safari/537.21",

Working on getting this integrated into the file but need to do more testing.

There is already an override for google.com, and it works for me here, so I’m not sure what the problem is.

I am directly going to gmail.com in the browser and logging in. I've attached 2 screenshots.

One is with the default override
"google.com": ["Mobile", "Android; Mobile"]

One is with the new override (note for some reason just overriding mail.google.com doesn't work, have to override google.com)
"google.com" : "Mozilla/5.0 (Ubuntu; Linux; Android 4.2.2) AppleWebKit/537.2
1 Mobile Safari/537.21"

As you can see from the pictures, using the second override renders something similar to iphone and android, which is what we want. However this override causes problems using google+ (plus.google.com) where scrolling stops working. I tried to add an override at the end for plus.google.com to just use original google override but this didn't work.

How can I use one override for gmail and another for google +? couldn't figure that out.

Where can I find ua-overrides.js to try this ?

/usr/lib/arm-linux-gnueabihf/qt5/qml/Ubuntu/Components/Extras/Browser/ua-overrides.js

Attached is a modified version of ua-overrides.js that formats GMail Web App correctly. There is a slight correction to the suggested format - must have ["Mobile",".....

var overrides = {
    "google.com": ["Mobile","Mozilla/5.0 (Ubuntu; Linux; Android 4.2.2) AppleWebKit/537.21 Mobile Safari/537.21"],

BTW - This also fixes Google Plus - it scrolls properly. Facebook still looks odd - might try that on my Galaxy Nexus Andriod 4.2 and see that it looks like.

If I add "facebook.com": ["Mobile","Mozilla/5.0 (Ubuntu; Linux; Android 4.2.2) AppleWebKit/537.21 Mobile Safari/537.21"],

after google.com then m.facebook.com works nicely too.

This version of ua-overrides.js fixes Gmail, GooglePlus and Facebook webapp appearance

BTW to update this file I mounted the Nexus 4 on my Ubuntu Desktop - copied the file to my desktop and added the extra values and then copied it back to Documents folder

To actually update the file I mounted the phones filesystem as RW

mount -n -o remount,rw /

then copied the file to the path /usr/lib/arm-linux-gnueabihf/qt5/qml/Ubuntu/Components/Extras/Browser/ua-overrides.js

Fix committed into lp:webbrowser-app at revision 349, scheduled for release in webbrowser-app, milestone ubuntu-13.04-month-5

This bug was fixed in the package webbrowser-app - 0.22+13.10.20130930.1-0ubuntu1

---------------
webbrowser-app (0.22+13.10.20130930.1-0ubuntu1) saucy; urgency=low

  [ Bill Filler ]
  * add user-agent override for mail.google.com. (LP: #1227941)

  [ Alexandre Abreu ]
  * Fix issue w/ with invalid webapp component id/access when filtering
    urls. (LP: #1231228)

  [ Olivier Tilloy ]
  * Update the licensing information for assets. (LP: #1194916)

  [ Ubuntu daily release ]
  * Automatic snapshot from revision 354
 -- Ubuntu daily release <email address hidden> Mon, 30 Sep 2013 16:32:46 +0000