one post: optimizing, not enough

html/one-post.less

@@ -41,8 +41,8 @@ hr {
   font-size: 0.875rem;
   color: gray;
   padding: 0.75rem;
-  width: 100%;
+  //width: 100%;
-  max-width: 100%;
+  //max-width: 100%;
   border-bottom-right-radius: 0.5rem;
   border-bottom-left-radius: 0.5rem;
   box-shadow: 0px 4px 5px rgba(25,25,25,.14),0px 1px 10px rgba(25,25,25,.12),0px 2px 4px rgba(0,0,0,.2);
@@ -51,7 +51,7 @@ hr {
 .bottom-inner {
   display: flex;
   justify-content: space-between;
-  vertical-align: middle;
+  //vertical-align: middle;
 }
 
 // V compromise V
@@ -60,14 +60,14 @@ a {
 }
 
 .comments {
-  width: max-content;
+  //width: max-content;
-  flex: none;
+  //flex: none;
 }
 
 .interactions {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  //justify-content: flex-end;
   gap: 0.75rem;
 }
 
@@ -87,12 +87,12 @@ a {
 
 .top {
   display: flex;
-  width: 100%;
+  //width: 100%;
-  max-width: 100%;
+  //max-width: 100%;
-  flex-direction: row;
+  //flex-direction: row;
   align-items: center;
-  justify-content: space-between;
+  //justify-content: space-between;
-  gap: 0.5rem;
+  //gap: 0.5rem;
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
   background-color: @not-white;
@@ -102,7 +102,7 @@ a {
 
 .top-info {
   display: flex;
-  min-width: 0;
+  //min-width: 0;
   flex: 1 1 0%;
   flex-direction: row;
   flex-wrap: wrap;
@@ -112,13 +112,13 @@ a {
 }
 
 .display-name {
-  max-width: 100%;
+  //max-width: 100%;
-  flex-shrink: 1;
+  //flex-shrink: 1;
-  overflow: hidden;
+  //overflow: hidden;
-  text-overflow: ellipsis;
+  //text-overflow: ellipsis;
-  white-space: nowrap;
+  //white-space: nowrap;
   font-weight: 700;
-  color: @not-black;
+  //color: @not-black;
 }
 
 .username {
@@ -126,25 +126,25 @@ a {
 }
 
 .posted {
-  display: block;
+  //display: block;
-  flex: none;
+  //flex: none;
   font-size: 0.75rem;
-  line-height: 1rem;
+  //line-height: 1rem;
   // not doing the weird tabular-nums thing, i don't get it
   color: rgb(130 127 124);
 }
 
 .headline {
   padding: 0.75rem;
-  display: flex;
+  //display: flex;
-  width: 100%;
+  //width: 100%;
-  flex-direction: row;
+  //flex-direction: row;
 }
 
 .headline > a {
-  flex-grow: 1;
+  //flex-grow: 1;
-  align-self: center;
+  //align-self: center;
-  overflow-wrap: break-word;
+  //overflow-wrap: break-word;
   font-size: 1.25rem;
   line-height: 1.75rem;
 }
@@ -157,16 +157,16 @@ a {
 .post-content {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
-  position: relative;
+  //position: relative;
-  overflow: hidden;
+  //overflow: hidden;
-  isolation: isolate;
+  //isolation: isolate;
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
 
 .post-inner {
   box-shadow: 0px 4px 5px rgba(0,0,0,.14),0px 1px 10px rgba(0,0,0,.12),0px 2px 4px rgba(0,0,0,.2);
-  z-index: -413;
+  //z-index: -413;
 }
 
 .posts {
@@ -174,5 +174,4 @@ a {
   flex-direction: column;
   //box-shadow: 0px 4px 5px rgba(0,0,0,.14),0px 1px 10px rgba(0,0,0,.12),0px 2px 4px rgba(0,0,0,.2);
   gap: 2rem;
-  flex-grow: 1;
 }

html/one-post.tsx

@@ -11,7 +11,7 @@ export const Post = ({
     display_name,
     username,
     posted,
-    link = "https://static.pyrope.net/cursor-fun-end",
+    link,
     id,
 }: {
     children?: ComponentChildren;
@@ -86,26 +86,7 @@ render_and_copy(
             posted="3 hr. ago"
             n_comments={0}
         >
-            i'm sorry about that do you want a css crime as penance
+            happens all the time. nothing personal, kid.
-        </Post>
-        <Post
-            headline="@onepost says"
-            username="onepost"
-            display_name="one post per user"
-            posted="2 hr. ago"
-            n_comments={111}
-        >
-            isn't this whole thing a css crime (that probably won't work)?
-        </Post>
-        <Post
-            headline="my bad"
-            username="mehbark"
-            posted="30 min. ago"
-            n_comments={3}
-        >
-            <span style='background: url("https://t4.ftcdn.net/jpg/02/31/38/67/240_F_231386743_1tDqjFySEGvqfoctbankdrsPTS7C76cz.jpg") 50% 50% no-repeat fixed;'>
-                oh yeah, good point! that makes my job a lot easier
-            </span>
         </Post>
     </div>
 );

html/this-post-is-two-posts.tsx

@@ -65,7 +65,7 @@ export const Top = ({
     display_name?: string;
     username: string;
     posted: string;
-    link: string;
+    link?: string;
     id?: string;
 }) => (
     <div class="top">