got rid of message tables and fixed pre reply bug

webpage/localuser.ts

@@ -445,7 +445,7 @@ class Localuser{
         const full=new Fullscreen(["html", content]);
         full.show();
 
-        const res=await fetch(this.info.api.toString()+"/v9/discoverable-guilds?limit=16", {
+        const res=await fetch(this.info.api.toString()+"/v9/discoverable-guilds?limit=50", {
             headers: this.headers
         });
         const json=await res.json();

webpage/markdown.ts

@@ -118,6 +118,11 @@ function markdown(text : string|string[],{keep=false,stdsize=false} = {}){
                     build+=txt[j];
                 }
             }
+            if(stdsize){
+                console.log(build);
+                build=build.replaceAll("\n","");
+                console.log(build,JSON.stringify(build));
+            }
             if(find===count){
                 appendcurrent();
                 i=j;

webpage/message.ts

@@ -157,7 +157,8 @@ class Message{
             div.classList.add("replying");
         }
         div.innerHTML="";
-        const build = document.createElement('table');
+        const build = document.createElement('div');
+        build.classList.add("flexltr");
         if(this.message_reference){
             const replyline=document.createElement("div");
             const line=document.createElement("hr");
@@ -213,8 +214,8 @@ class Message{
         build.classList.add("message");
         div.appendChild(build);
         if({0:true,19:true}[this.type]||this.attachments.length!==0){
-            const pfpRow = document.createElement('th');
-
+            const pfpRow = document.createElement('div');
+            pfpRow.classList.add("flexltr");
             let pfpparent, current
             if(premessage!=null){
                 pfpparent??=premessage;
@@ -234,18 +235,19 @@ class Message{
             }
             pfpRow.classList.add("pfprow")
             build.appendChild(pfpRow);
-            const text=document.createElement("th");
-
-            const texttxt=document.createElement("table");
-            texttxt.classList.add("commentrow")
+            const text=document.createElement("div");
+            text.classList.add("flexttb")
+            const texttxt=document.createElement("div");
+            texttxt.classList.add("commentrow","flexttb");
             text.appendChild(texttxt);
             if(combine){
                 const username=document.createElement("span");
                 username.classList.add("username")
                 this.author.bind(username,this.guild);
-
+                div.classList.add("topMessage");
                 username.textContent=this.author.username;
-                const userwrap=document.createElement("tr")
+                const userwrap=document.createElement("div");
+                userwrap.classList.add("flexltr");
                 userwrap.appendChild(username)
                 if(this.author.bot){
                     const username=document.createElement("span");
@@ -259,24 +261,29 @@ class Message{
                 userwrap.appendChild(time);
 
                 texttxt.appendChild(userwrap)
+            }else{
+                div.classList.remove("topMessage");
             }
             const messaged=markdown(this.content);
             div["txt"]=messaged;
-            const messagedwrap=document.createElement("tr")
+            const messagedwrap=document.createElement("div");
+            messagedwrap.classList.add("flexttb")
             messagedwrap.appendChild(messaged)
             texttxt.appendChild(messagedwrap)
 
             build.appendChild(text)
             if(this.attachments.length){
                 console.log(this.attachments)
-                const attach = document.createElement("tr")
+                const attach = document.createElement("div");
+                attach.classList.add("flexltr");
                 for(const thing of this.attachments){
                     attach.appendChild(thing.getHTML())
                 }
                 messagedwrap.appendChild(attach)
             }
             if(this.embeds.length){
-                const embeds = document.createElement("tr")
+                const embeds = document.createElement("div")
+                embeds.classList.add("flexltr");
                 for(const thing of this.embeds){
                     embeds.appendChild(thing.generateHTML());
                 }
@@ -285,24 +292,23 @@ class Message{
             //
         }else if(this.type===7){
 
-            const text=document.createElement("th");
-
-            const texttxt=document.createElement("table");
+            const text=document.createElement("div");
+            text.classList.add("flexttb")
+            const texttxt=document.createElement("div");
             text.appendChild(texttxt);
-            build.appendChild(text)
-
+            build.appendChild(text);
+            texttxt.classList.add("flexltr");
             const messaged=document.createElement("p");
             div["txt"]=messaged;
             messaged.textContent="welcome: "+this.author.username;
-            const messagedwrap=document.createElement("tr")
-            messagedwrap.appendChild(messaged);
+            texttxt.appendChild(messaged);
 
             const time=document.createElement("span");
             time.textContent="  "+formatTime(new Date(this.timestamp));
             time.classList.add("timestamp");
-            messagedwrap.append(time);
+            texttxt.append(time);
+            div.classList.add("topMessage")
 
-            texttxt.appendChild(messagedwrap)
         }
         div["all"]=this;
         return(div)

webpage/style.css

@@ -70,6 +70,10 @@ th {
 	max-width:100%;
 	/* width: 9%; */
 	/* display: inline-block; */
+	display: flex;
+	flex-wrap: nowrap;
+	flex-direction: column;
+	max-height: 20in;
 }
 pre {
 	background-color: var(--code-bg);
@@ -222,33 +226,38 @@ img {
 
 .message {
 	width: 100%;
+	flex-wrap: nowrap !important;
+	overflow: auto !important;
 }
 
 .pfprow {
 	width: .5in;
+	flex-shrink: 0;
 }
 
 .commentrow {
 	width: 100%;
-    height: 100%;
-    vertical-align: top;
+	height: 100%;
+	vertical-align: top;
 	word-wrap: break-word;
 	text-align: left;
 	font-weight: normal;
 }
 
 #messagecontainer {
-	overflow: auto;
+	overflow-y: auto;
 	display: flex;
 	max-width: 100%;
 	flex-shrink: 1;
 	width: 100%;
 	/* flex-grow: 1; */
+	overflow-x: clip;
 }
 
 #messages {
 	max-width: 100%;
 	/* height: 100%; */
+	width: 100%;
 }
 
 p {
@@ -331,7 +340,7 @@ div {
 
 p {
 	transition: background .1s ease-in-out, color .1s ease-in-out;
-	width: 100%;
+	/* width: 100%; */
 }
 
 .username {
@@ -385,6 +394,7 @@ p {
 #typediv {
 	position: relative;
 	/* display: flex; */
+	width: 99%;
 }
 
 .loading-indicator {
@@ -480,6 +490,7 @@ p {
 .timestamp {
 	color: var(--timestamp-color);
 	font-size: .14in;
+	padding-left: .05in;
 }
 
 .replyflex {
@@ -537,7 +548,22 @@ p {
 	width: 25vw;
 	grid-column: 2;
 }
-
+.replytext pre {
+	padding: 0 .05in;
+	color: var(--reply-text);
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	max-width: fit-content;
+	/* display: block; */
+	/* flex-grow: 1; */
+	flex: 1 1 auto;
+	width: fit-content;
+	min-width: 0;
+	/* display: inline-block !important; */
+	width: 25vw;
+	grid-column: 2;
+}
 ::-webkit-scrollbar {
 	width: .1in;
 	height: .1in;
@@ -1143,6 +1169,7 @@ span {
 	overflow: auto;
 	/* margin-bottom: 1in; */
 	/* padding-bottom: .1in; */
+	align-items: flex-start;
 }
 .settingbuttons{
 	padding-top:.075in;
@@ -1296,4 +1323,32 @@ span {
 	width:80vw;
 	display: flex;
 	flex-direction: column;
+}
+.flex{
+	display:flex;
+	h3{
+		width: fit-content;
+	}
+;
+}
+.pfprow .pfp{
+	width:.4in;
+	height:.4in;
+}
+.topMessage{
+	padding-top:.1in
+}
+.messagediv  .flexltr{
+	display:flex;
+	flex-wrap:wrap;
+	overflow:hidden !important;
+	max-height:100in;
+}
+.messagediv .flexttb{
+	display:flex;
+	overflow: hidden;
+	flex-wrap: wrap;
+	width: 100%;
+	flex-direction: row;
+	max-height:100in;
 }