feat: better delineate link preview and expand to fill width

Pushes the attachment box with the paperclip icon out so the content and not the container are aligned with the note text.

app/scss/ila.scss

@@ -62,6 +62,7 @@ header.microblog {
 }
 
 .h-entry {
+	position: relative;
 	border-bottom: 1px solid $border;
 	margin: 15px 0;
 	font-size: 1.15em;
@@ -126,12 +127,6 @@ header.microblog {
 	padding: 0;
 	border-left: 0;
 	font-size: 1em;
-	div.quote {
-		position: absolute;
-		left: 40px;
-		font-size: 1.5em;
-		color: $muted-text;
-	}
 	p {
 		font-size: 1em;
 	}
@@ -140,6 +135,13 @@ header.microblog {
 	}
 }
 
+.ap-indent-icon {
+	position: absolute;
+	left: 30px;
+	font-size: 1.5em;
+	color: $muted-text;
+}
+
 .tiny-actor-icon {
 		max-width: 25px;
 	}
@@ -221,16 +223,23 @@ header.microblog {
 	}
 }
 
+/*********
+ * Attachments and link previews
+ */
+
 .activity-og-meta, .activity-attachment {
-	background: $background;
+	position: relative;
+	border: none;
+	display: flex;
+	padding: 0;
+	padding-left: 65px;
+	margin: 1em 0 1em -65px;
+	max-width: calc(100% + 65px);
 }
 
 .activity-og-meta {
-	display: flex;
-	padding: 0;
 	.meta-img {
 		flex: 0 0 150px;
-		border-radius: 4px 0 0 4px;
 		img {
 			width: 100%;
 			height: 100%;
@@ -239,6 +248,8 @@ header.microblog {
 	}
 	.caption {
 		overflow: hidden;
+		flex-grow: 1;
+		background: $background;
 		h4 {
 			white-space: nowrap;
 			overflow: hidden;
@@ -247,28 +258,12 @@ header.microblog {
 	}
 }
 
-/*********
-* Attachments
-*/
-
 .activity-attachment {
-	position: relative;
-	display: flex;
-	padding-left: 50px;
-	max-width: 100%;
 	flex-wrap: wrap;
 	&.single {
 		.attachment-item, .attachment-wrapper {
 			max-height: fit-content;
 		}
-	}	
-	.icon {
-		display: block;
-		position: absolute;
-		top: 5px;
-		left: 10px;
-		font-size: 2em;
-		color: $muted-text;
 	}
 	audio, video {
 		width: 100%;

data/templates/index.html

@@ -39,7 +39,7 @@
                         <div class="h-entry" id="{{ outbox_object.permalink_id }}">
                             <div class="shared-header"><strong><a class="p-author h-card" href="{{ local_actor.url }}">{{ utils.display_tiny_actor_icon(local_actor) }}  {{ local_actor.display_name | clean_html(local_actor) | safe }}</a></strong> shared <span title="{{ outbox_object.ap_published_at.isoformat() }}">{{ outbox_object.ap_published_at | timeago }}</span></div>
                             <blockquote class="h-cite u-repost-of">
-                                <div class="quote"><i class="fas fa-quote-left"></i></div>
+                                <div class="ap-indent-icon"><i class="fas fa-quote-left"></i></div>
                                 {{ utils.display_object(outbox_object.relates_to_anybox_object, is_h_entry=False) }}
                             </blockquote>
                         </div>

data/templates/utils.html

@@ -742,7 +742,7 @@
 
     {% if object.attachments %}
         <div class="activity-attachment card {% if object.attachments|length == 1 %} single{% endif %}">
-            <div class="icon"><i class="fas fa-paperclip"></i></div>
+            <div class="ap-indent-icon"><i class="fas fa-paperclip"></i></div>
             {{ display_attachments(object) }}
         </div>
     {% endif %}