+++ This bug was initially created as a clone of Bug #1572648 +++

Link previews was implemented in bug 1572648. Inline controls per https://app.presentator.io/#/vgfdzj34 are partly implemented but commented out for now, as they need a bit of visual love (at least) yet. This is what this bug should handle.

To avoid clipping the edges of the link previews, I suggest adding to the css the text in bold as follows:

<aside xmlns="http://www.w3.org/1999/xhtml"
class="moz-card url-replaced"
style="width:600px; display:flex; align-items:center;
justify-content:center; flex-direction:row; flex-wrap:wrap; border-radius:10px;
border:1px solid silver; overflow: hidden;"
id="card-1234567890123">
<div class="card-pic" style="display:flex; flex-direction:column; flex-basis:100%; flex:1;">
<div style="margin:0 5px;"> <img src="https://www.example.com" style="width:120px;" alt=""> </div>
</div>
<div class="card-content"
style="display:flex; flex-direction:column; flex-basis:100%; flex:3; background-color:#F5F5F5;">
<div style="margin:0 1em;">
<p><small class="site" style="font-weight:lighter;">www.example.com</small></p>
<p> <a href="#" style="font-weight:600; color:black; text-decoration:none;">
<big class="title">Example Text</big></a>
</p>
<p class="description">Example Description text</p>
<p> <a href="https://www.example.com/" class="url"
style="display:inline-block; text-decoration:none; text-indent:-2ch; margin-inline:2ch;"
title="www.example.com">https://www.example.com </a> </p>
</div>
</div>
</aside>