feat(app): improve image picker, markdown rendering, and UI interactions

packages/app/src/styles/markdown-styles.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vitest";
+import { createMarkdownStyles } from "./markdown-styles";
+import { darkTheme } from "./theme";
+
+describe("createMarkdownStyles", () => {
+  it("applies shrink-and-wrap constraints to long markdown text and links", () => {
+    const styles = createMarkdownStyles(darkTheme);
+
+    expect(styles.body).toMatchObject({
+      flexShrink: 1,
+      minWidth: 0,
+      width: "100%",
+    });
+
+    expect(styles.paragraph).toMatchObject({
+      flexShrink: 1,
+      minWidth: 0,
+      width: "100%",
+      flexWrap: "wrap",
+    });
+
+    expect(styles.text).toMatchObject({
+      flexShrink: 1,
+      minWidth: 0,
+      overflowWrap: "anywhere",
+    });
+
+    expect(styles.link).toMatchObject({
+      flexShrink: 1,
+      minWidth: 0,
+      overflowWrap: "anywhere",
+    });
+
+    expect(styles.blocklink).toMatchObject({
+      flexShrink: 1,
+      minWidth: 0,
+      overflowWrap: "anywhere",
+    });
+  });
+});

packages/app/src/styles/markdown-styles.ts

@@ -18,10 +18,16 @@ export function createMarkdownStyles(theme: Theme) {
       color: theme.colors.foreground,
       fontSize: theme.fontSize.base,
       lineHeight: 22,
+      flexShrink: 1,
+      minWidth: 0,
+      width: "100%" as const,
     },
 
     text: {
       color: theme.colors.foreground,
+      flexShrink: 1,
+      minWidth: 0,
+      overflowWrap: "anywhere" as const,
     },
 
     paragraph: {
@@ -31,6 +37,9 @@ export function createMarkdownStyles(theme: Theme) {
       flexDirection: "row" as const,
       alignItems: "flex-start" as const,
       justifyContent: "flex-start" as const,
+      flexShrink: 1,
+      minWidth: 0,
+      width: "100%" as const,
     },
 
     // =========================================================================
@@ -117,13 +126,19 @@ export function createMarkdownStyles(theme: Theme) {
     },
 
     link: {
-      color: theme.colors.primary,
-      textDecorationLine: "underline" as const,
+      color: theme.colors.accentBright,
+      textDecorationLine: "none" as const,
+      flexShrink: 1,
+      minWidth: 0,
+      overflowWrap: "anywhere" as const,
     },
 
     blocklink: {
-      color: theme.colors.primary,
-      textDecorationLine: "underline" as const,
+      color: theme.colors.accentBright,
+      textDecorationLine: "none" as const,
+      flexShrink: 1,
+      minWidth: 0,
+      overflowWrap: "anywhere" as const,
     },
 
     // =========================================================================
@@ -135,7 +150,8 @@ export function createMarkdownStyles(theme: Theme) {
       color: theme.colors.foreground,
       paddingHorizontal: theme.spacing[1],
       paddingVertical: 2,
-      borderRadius: theme.borderRadius.sm,
+      borderRadius: theme.borderRadius.md,
+      borderWidth: 0,
       fontFamily: Fonts.mono,
       fontSize: theme.fontSize.sm,
     },

packages/app/src/styles/theme.ts

@@ -123,6 +123,7 @@ const lightSemanticColors = {
 
   // Brand
   accent: "#20744A",
+  accentBright: "#239956",
   accentForeground: "#ffffff",
 
   // Semantic
@@ -192,6 +193,7 @@ const darkSemanticColors = {
 
   // Brand
   accent: "#20744A",
+  accentBright: "#7ccba0",
   accentForeground: "#ffffff",
 
   // Semantic