fix: text compose papercuts (#270)

* make fixes

* cleanup

js/desktop/src/features/compose/markdown-editor.css

@@ -57,6 +57,80 @@
 .llink-crepe .milkdown .ProseMirror {
   padding: 0;
   outline: none;
+  caret-color: white;
+}
+
+/* Crepe's default heading scale (42px h1) is sized for a document editor;
+ * tighten it to message-card proportions. Applies to compose and read-only
+ * alike so the editing view matches the posted card. */
+.llink-crepe .milkdown .ProseMirror h1 {
+  font-size: 1.875rem;
+  line-height: 2.375rem;
+  font-weight: 600;
+  margin-top: 24px;
+}
+
+.llink-crepe .milkdown .ProseMirror h2 {
+  font-size: 1.5rem;
+  line-height: 2rem;
+  font-weight: 600;
+  margin-top: 20px;
+}
+
+.llink-crepe .milkdown .ProseMirror h3 {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  font-weight: 600;
+  margin-top: 16px;
+}
+
+.llink-crepe .milkdown .ProseMirror h4 {
+  font-size: 1.125rem;
+  line-height: 1.625rem;
+  font-weight: 600;
+  margin-top: 12px;
+}
+
+.llink-crepe .milkdown .ProseMirror h5 {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 600;
+  margin-top: 12px;
+}
+
+.llink-crepe .milkdown .ProseMirror h6 {
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+  font-weight: 700;
+  margin-top: 12px;
+  color: rgb(255 255 255 / 0.7);
+}
+
+.llink-crepe .milkdown .ProseMirror > :first-child {
+  margin-top: 0;
+}
+
+/* Images come from URLs only (no stable public upload URL), so hide the
+ * file uploader — the placeholder then just prompts for a link. */
+.llink-crepe
+  .milkdown
+  :is(.milkdown-image-block, .milkdown-image-inline)
+  .placeholder
+  .uploader {
+  display: none;
+}
+
+/* Read-only renders the image node view with inert editing chrome — hide it. */
+.llink-crepe:not(.llink-crepe--fill) .milkdown .milkdown-image-block .operation,
+.llink-crepe:not(.llink-crepe--fill)
+  .milkdown
+  .milkdown-image-block
+  .image-resize-handle {
+  display: none;
+}
+
+.llink-crepe .milkdown .milkdown-image-block img {
+  border-radius: 8px;
 }
 
 /* Editing context: fill the compose card and scroll internally so a long
@@ -71,8 +145,10 @@
 }
 
 /* Pad the content (not the card) so the slash menu — which Crepe appends to
- * .milkdown — can use the full card width/height before clipping. */
+ * .milkdown — can use the full card width/height before clipping. The shared
+ * layout variables (globals.css) keep the editor's content column identical
+ * to the posted card's, and the gutter fits the block drag handle. */
 .llink-crepe--fill .milkdown .ProseMirror {
   min-height: 100%;
-  padding: 1.25rem;
+  padding: var(--message-card-padding) var(--message-editor-gutter);
 }