Remove jank from page load

attestate · Dec 2, 2024 · 06f2dd7 · 06f2dd7
1 parent 22f30af
commit 06f2dd7
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 9 deletions.
diff --git a/src/public/news.css b/src/public/news.css
@@ -4,6 +4,8 @@
   --background-color1: rgba(255,0,0,0.06);
   --bg-off-white: #f6f6ef;
   --border: 2px dotted rgba(219, 105, 141,0.3);
+  --border-thin: 1px dotted rgba(219, 105, 141,0.3);
+  --border-line: 1px solid rgba(219, 105, 141,0.3);
   --header-beige: #fafafa;
   --middle-beige: #f3f3f3;
   --table-bg: #f8f8f7;

diff --git a/src/views/components/header.mjs b/src/views/components/header.mjs
@@ -23,7 +23,7 @@ const header = async (theme, path) => {
     >
       <tbody>
         <tr>
-          <td style="line-height:12pt; height:60px;">
+          <td style="line-height:12pt; height:62px;">
             <div
               style="display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center;"
             >
@@ -33,7 +33,7 @@ const header = async (theme, path) => {
                   href="/"
                 >
                   <img
-                    style="filter: saturate(90%); width: 35px;"
+                    style="filter: saturate(90%); width: 35px; height: 35px;"
                     src="kiwi-icon.webp"
                   />
                   Kiwi News</a

diff --git a/src/views/components/row.mjs b/src/views/components/row.mjs
@@ -314,7 +314,7 @@ const row = (
                 >
                   <div
                     class="interaction-element"
-                    style="border-radius: 2px; padding: 5px 0; border: var(--border); background-color: var(--bg-off-white); display: flex; align-items: center; justify-content: center; min-width: 45px; margin: 5px 8px 5px 6px; align-self: stretch;"
+                    style="border-radius: 2px; padding: 5px 0; border: var(--border); background-color: var(--bg-off-white); display: flex; align-items: center; justify-content: center; min-width: 49px; margin: 5px 8px 5px 6px; align-self: stretch;"
                   >
                     <div style="min-height: 40px; display:block;">
                       <div class="votearrowcontainer">
@@ -362,13 +362,13 @@ const row = (
                       >
                         <img
                           loading="lazy"
-                          style="max-height: 61px; border: 1px solid #ccc; border-radius: 2px; width: 110px; object-fit: cover;"
+                          style="max-height: 61px; border: var(--border-line); border-radius: 2px; width: 110px; object-fit: cover;"
                           src="${DOMPurify.sanitize(story.metadata.image)}"
                       /></a>`
                     : null
                 }
                 <div
-                  style="min-height: 55px; display:flex; justify-content: center; flex-direction: column; flex-grow: 1; line-height: 1.3; padding: 8px 3px 5px 0;"
+                  style="min-height: 59px; display:flex; justify-content: center; flex-direction: column; flex-grow: 1; line-height: 1.3; padding: 8px 3px 5px 0;"
                 >
                   <span>
                     <span class="story-link-container">
@@ -612,7 +612,7 @@ const row = (
                         style="margin: 5px; border: var(--border); background-color: var(--bg-off-white); border-radius: 2px; display: ${path ===
                         "/stories"
                           ? "none"
-                          : "flex"}; justify-content: center; min-width: 45px; align-items: center; flex-direction: column;"
+                          : "flex"}; justify-content: center; min-width: 49px; align-items: center; flex-direction: column;"
                       >
                         ${ChatsSVG()}
                         <span

diff --git a/src/web/src/ChatBubble.jsx b/src/web/src/ChatBubble.jsx
@@ -55,7 +55,7 @@ const ChatBubble = ({ allowlist, delegations, storyIndex, commentCount }) => {
         display: "flex",
         alignSelf: "stretch",
         justifyContent: "center",
-        minWidth: "45px",
+        minWidth: "49px",
         alignItems: "center",
         flexDirection: "column",
       }}

diff --git a/src/web/src/Vote.jsx b/src/web/src/Vote.jsx
@@ -151,13 +151,13 @@ const Vote = (props) => {
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
-              minWidth: "45px",
+              minWidth: "49px",
               margin: "5px 8px 5px 6px",
               alignSelf: "stretch",
               cursor: hasUpvoted ? "not-allowed" : "pointer",
             }}
           >
-            <div style={{ minHeight: "40px", display: "block" }}>
+            <div style={{ minHeight: "38px", display: "block" }}>
               <div
                 className={`votearrow`}
                 style={{