From bf147a131353a03922bfd9805fbbb0f612acd1b0 Mon Sep 17 00:00:00 2001
From: Alessio <me@playfulpachyderm.com>
Date: Tue, 29 Aug 2023 14:04:57 -0300
Subject: [PATCH] Fix weird scrolling issues by specifying width and height for
 image/video elements

---
 internal/webserver/static/icons/like.svg           |  2 +-
 internal/webserver/static/styles.css               |  5 +++++
 internal/webserver/tpl/includes/base.tpl           |  2 +-
 .../tpl/tweet_page_includes/single_tweet.tpl       | 14 +++++++++++---
 4 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/internal/webserver/static/icons/like.svg b/internal/webserver/static/icons/like.svg
index 363a465..39a7340 100644
--- a/internal/webserver/static/icons/like.svg
+++ b/internal/webserver/static/icons/like.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="r-4qtqp9 r-yyyyoo r-50lct3 r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1srniue"><g><path d="M16.697 5.5c-1.222-.06-2.679.51-3.89 2.16l-.805 1.09-.806-1.09C9.984 6.01 8.526 5.44 7.304 5.5c-1.243.07-2.349.78-2.91 1.91-.552 1.12-.633 2.78.479 4.82 1.074 1.97 3.257 4.27 7.129 6.61 3.87-2.34 6.052-4.64 7.126-6.61 1.111-2.04 1.03-3.7.477-4.82-.561-1.13-1.666-1.84-2.908-1.91zm4.187 7.69c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><g><path d="M16.697 5.5c-1.222-.06-2.679.51-3.89 2.16l-.805 1.09-.806-1.09C9.984 6.01 8.526 5.44 7.304 5.5c-1.243.07-2.349.78-2.91 1.91-.552 1.12-.633 2.78.479 4.82 1.074 1.97 3.257 4.27 7.129 6.61 3.87-2.34 6.052-4.64 7.126-6.61 1.111-2.04 1.03-3.7.477-4.82-.561-1.13-1.666-1.84-2.908-1.91zm4.187 7.69c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z"></path></g></svg>
diff --git a/internal/webserver/static/styles.css b/internal/webserver/static/styles.css
index acca82f..a1aa691 100644
--- a/internal/webserver/static/styles.css
+++ b/internal/webserver/static/styles.css
@@ -564,3 +564,8 @@ ul.dropdown-items {
     border-radius: 0.5em;
     color: var(--color-twitter-text-gray);
 }
+.tweet-image {
+    max-width: 95%;
+    width: auto;
+    height: auto;
+}
diff --git a/internal/webserver/tpl/includes/base.tpl b/internal/webserver/tpl/includes/base.tpl
index 8848d9b..476525d 100644
--- a/internal/webserver/tpl/includes/base.tpl
+++ b/internal/webserver/tpl/includes/base.tpl
@@ -14,7 +14,7 @@
         <a onclick="window.history.back()" class="back-button quick-link">
           <img class="svg-icon" src="/static/icons/back.svg" />
         </a>
-        <form hx-get="/search" hx-push-url="true" hx-target="body">
+        <form hx-get="/search" hx-push-url="true" hx-target="body" hx-swap="inner-html show:window:top">
           <input name="q" class="search-bar" placeholder="Search" type="text" />
         </form>
       </div>
diff --git a/internal/webserver/tpl/tweet_page_includes/single_tweet.tpl b/internal/webserver/tpl/tweet_page_includes/single_tweet.tpl
index e08bc98..059b9f4 100644
--- a/internal/webserver/tpl/tweet_page_includes/single_tweet.tpl
+++ b/internal/webserver/tpl/tweet_page_includes/single_tweet.tpl
@@ -57,10 +57,15 @@
         {{end}}
         {{template "text-with-entities" $main_tweet.Text}}
         {{range $main_tweet.Images}}
-          <img src="/content/images/{{.LocalFilename}}" style="max-width: 45%"/>
+          <img class="tweet-image" src="/content/images/{{.LocalFilename}}"
+            width="{{.Width}}" height="{{.Height}}"
+            {{if (gt (len $main_tweet.Images) 1)}}
+              style="max-width: 45%"
+            {{end}}
+          />
         {{end}}
         {{range $main_tweet.Videos}}
-          <video controls hx-trigger="click consume">
+          <video controls hx-trigger="click consume" width="{{.Width}}" height="{{.Height}}">
             <source src="/content/videos/{{.LocalFilename}}">
           </video>
         {{end}}
@@ -72,7 +77,10 @@
             style="max-width: {{if (ne .ThumbnailWidth 0)}}{{.ThumbnailWidth}}px {{else}}fit-content {{end}}"
             hx-trigger="click consume"
           >
-            <img class="embedded-link-preview" src="/content/link_preview_images/{{.ThumbnailLocalPath}}"/>
+            <img src="/content/link_preview_images/{{.ThumbnailLocalPath}}"
+              class="embedded-link-preview"
+              width="{{.ThumbnailWidth}}" height="{{.ThumbnailHeight}}"
+            />
             <h3 class="embedded-link-title">{{.Title}}</h3>
             <p class="embedded-link-description">{{.Description}}</p>
             <span class="row embedded-link-domain-container">