better markdown styles for github

.gitignore

@@ -7,6 +7,7 @@ out/
 .DS_Store
 bin/
 dev-bin
+local-server-bin
 *.pw
 build/
 *.dmg

src/emain.ts

@@ -63,7 +63,6 @@ if (isDev) {
 }
 let app = electron.app;
 app.setName((isDev ? "Prompt (Dev)" : "Prompt"));
-const DevLocalServerPath = "/Users/mike/prompt-dev/local-server";
 let localServerProc = null;
 let localServerShouldRestart = false;
 
@@ -99,7 +98,7 @@ function getBaseHostPort() {
 
 function getLocalServerPath() {
     if (isDev) {
-        return DevLocalServerPath
+        return path.join(getAppBasePath(), "local-server-bin", "local-server");
     }
     return path.join(getAppBasePath(), "bin", "prompt-local-server");
 }

src/markdownrenderer.tsx

@@ -6,6 +6,7 @@ import {If, For, When, Otherwise, Choose} from "tsx-control-statements/component
 import {WindowSize, RendererContext, TermOptsType, LineType, RendererOpts} from "./types";
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
+import {boundInt} from "./util";
 
 type OV<V> = mobx.IObservableValue<V>;
 
@@ -70,10 +71,17 @@ class SimpleMarkdownRenderer extends React.Component<{data : Blob, context : Ren
         };
         let opts = this.props.opts;
         let markdownText = this.markdownText.get();
+        let maxWidth = opts.maxSize.width;
+        let minWidth = opts.maxSize.width;
+        if (minWidth > 1000) {
+            minWidth = 1000;
+        }
         return (
             <div className="markdown-renderer">
-                <div className="markdown content" style={{maxHeight: opts.maxSize.height, maxWidth: opts.maxSize.width, overflow: "auto"}}>
-                    <ReactMarkdown children={this.markdownText.get()} remarkPlugins={[remarkGfm]} components={markdownComponents}/>
+                <div className="markdown-scroller" style={{maxHeight: opts.maxSize.height}}>
+                    <div className="markdown content" style={{maxWidth: maxWidth, minWidth: minWidth}}>
+                        <ReactMarkdown children={this.markdownText.get()} remarkPlugins={[remarkGfm]} components={markdownComponents}/>
+                    </div>
                 </div>
             </div>
         );

src/sh2.less

@@ -2984,7 +2984,7 @@ input[type=checkbox] {
 .markdown {
     color: @term-white;
     margin-bottom: 10px;
-    
+
     code {
         background-color: black;
         color: white;
@@ -2999,7 +2999,9 @@ input[type=checkbox] {
 
     .title {
         color: white;
-        margin-bottom: 0;
+        margin-top: 16px;
+        line-height: 1.25;
+        margin-bottom: 8px;
     }
 
     strong {
@@ -3033,6 +3035,33 @@ input[type=checkbox] {
         margin: 4px 10px 4px 10px;
         padding: 2px 4px 2px 6px;
     }
+
+    .title.is-1 {
+        font-size: 32px;
+        border-bottom: 1px solid #777;
+        padding-bottom: 6px;
+    }
+    .title.is-2 {
+        font-size: 24px;
+        border-bottom: 1px solid #777;
+        padding-bottom: 6px;
+    }
+    .title.is-3 {
+        font-size: 20px;
+    }
+    .title.is-4 {
+        font-size: 16px;
+    }
+    .title.is-5 {
+        font-size: 14px;
+    }
+    .title.is-6 {
+        font-size: 14px;
+    }
+}
+
+.markdown > *:first-child {
+    margin-top: 0 !important;
 }
 
 .markdown-renderer {
@@ -3043,9 +3072,18 @@ input[type=checkbox] {
     }
 }
 
+.markdown-renderer {
+    .markdown-scroller {
+        overflow: auto;
+        display: flex;
+        flex-diretion: row;
+    }
+}
+
 .markdown-renderer .markdown {
     padding: 5px;
     line-height: 1.5;
+    width: min-content;
 
     blockquote {
         background-color: #222;
@@ -3058,5 +3096,7 @@ input[type=checkbox] {
 
     pre {
         background-color: #222;
+        margin: 2px 10px 6px 10px;
+        padding: 4px 4px 4px 6px;
     }
 }