There are a couple of ways to do this.
The amp-carousel component is set to overflow:hidden and we can't override that. So moving the .amp-carousel-button elements won't work.
The easiest option is to just make the images smaller something like this would do it.
amp-carousel amp-img{
max-width:calc(100% - 120px);
}
The other option would be to hide the default buttons and add your own custom ones using amp-bind to control the slides on="tap:my-carousel.goToSlide(index=0)"
Similar to how the thumbnail images are done here https://amp.dev/documentation/examples/multimedia-animations/image_galleries_with_amp-carousel/?format=email#image-gallery-with-preview
So AMP for Email is a seperate MIME type.
Currently for every send you are probably sending 2 MIME types, an HTML email and a plain text email. With AMP for Email you send 3, HTML, plain text and AMP for Email.
So it's not really a boilerplate things, to create the fallback you just create an extra file, amp-email.html html-email.html plain-text-email.txt
The way you add these depends on how your ESP is set up, this is a link to how we do it in SFMC https://help.salesforce.com/articleView?id=sf.mc_ceb_amp_get_started.htm&type=5
Just had a look and this is a very strange one.
It looks like Gmail is adding <wbr> elements into the code to break it up so styling the outer elements won't fix it.
However you could add wbr {display: none;} to remove them.
I'd also advice adding a class in there so it's not going to break if you want to use <wbr> in the future.
<html>
<head>
<style>
.no-wrap wbr{
display:none;
}
</style>
</head>
<body>
<table style="border-collapse: collapse;width: 400px;table-layout: fixed;">
<tr>
<td style="padding: 0;width:100%;">
<a href="https://docs.google.com" target="_blank" style="display: inline-block; max-width: 100%; border: 1px solid blue; white-space: nowrap;" class="no-wrap">
<div style="overflow: hidden; text-overflow: ellipsis;">
<img src="https://www.iconspng.com/images/square.jpg" width="18" height="18">
<span style="display: inline;overflow: hidden; text-overflow: ellipsis;">long-word-with-hyphen-for-testing-so-we-can-check-how-gmail-Chrome-renders-it
</span>
</div>
</a>
</td>
</tr>
<tr>
<td style="padding: 0;width:100%;">
<a href="https://docs.google.com" target="_blank" style="display: inline-block; max-width: 100%; border: 1px solid blue; white-space: nowrap;" class="no-wrap">
<div style="overflow: hidden; text-overflow: ellipsis;">
<img src="https://www.iconspng.com/images/square.jpg" width="18" height="18">
<span style="display: inline;overflow: hidden; text-overflow: ellipsis;">this is long message without hyphen and Gmail does not wrap
</span>
</div>
</a>
</td>
</tr></table>
</body></html>
I've found a bit of a work around.
We can apply a media query directly to a <style> block.
e.g. <style media="screen and (max-width:480px)">
But some email clients will ignore the media attribute and apply it as a regular style even when the media condition isn't met.
So to only apply it to Thunderbird we can prefix our styles with .moz-text-html so the full fix looks like
<style media="screen and (max-width:600px)">
.moz-text-html .foo{background:green}
</style>
There is a bug for it filed here https://bugzilla.mozilla.org/show_bug.cgi?id=1679878
And a bit more info on why they did it here https://bugzilla.mozilla.org/show_bug.cgi?id=1530106#c60
Yup I'm seeing this too.
I was on 78.3.0 and just updated to 78.5.0 on MacOS 10.15.7 tested both versions, and both are removing media queries.
Testing on Litmus media queries are supported Thunderbird 60 on Windows 10
VML is rendered as an image in Outlook, meaning all the content becomes part of the image. This causes issues for accessibility.
The best option is to avoid putting anything more than one line of content inside VML.
If you are using content inside VML it's always best to set an alt to be sure of what it read to the user.
<v:rect fill="true" stroke="false" style="width:640px; height:210px;" alt="Lorem ipsum dolor sit amet, coctetuer adipiscing elit">
<h2>Lorem ipsum<br> dolor sit amet,<br> coctetuer adipiscing<br> elit</h2>
</v:rect>
Without the alt it will be read as Rect. Lorem ipsum dolor sit amet, coctetuer adipiscing elit
With the alt it will be read as Lorem ipsum dolor sit amet, coctetuer adipiscing elit
As a side note, I can see you have role="button" on a link. This makes the link unusable for people using screen readers. When talking about design we often refer to styled links as buttons but semantically they are still links <a></a> and not buttons <button></button>. When adding role="button" the screen reader will be passing message of a button action rather than a link action meaning it doesn't get clicked.
Ah right.
In that case I'd recommend these tools
https://wave.webaim.org
https://www.deque.com/axe
I'd recommend this one, it gives a really good break down of the issues end users might have
https://whocanuse.com/?b=ffdddd&c=567000&f=24&s=