Include message card in Image Export so dark mode text is visible

[rjwignar]

This fixes #651

The white text in the dark mode card body is camouflaged by the white background of html2canvas.

One solution to make this text visible is to include the entire card (which wraps the text) in the HTML sent to html2canvas:
Before (card body only, white text invisible):

After (entire card, white text appears as rendered inside card:

[rjwignar]

I must add that this change has a visual bug in which the background colours invert:
On Edge:

On Chrome:

On the Chrome screenshot you can see the message options menu didn't completely close.
I wonder if we should add a delay between clicking "Export as Image" and html2canvas taking a screenshot

[cloudflare-workers-and-pages]

Deploying chatcraft-org with    Cloudflare Pages

Latest commit:	0d8eaa3
Status:	✅  Deploy successful!
Preview URL:	https://96c9de34.console-overthinker-dev.pages.dev
Branch Preview URL:	https://issue-651.console-overthinker-dev.pages.dev

View logs

[rjwignar]

Since the options object is empty ({}) we can remove it from our code.

I'm wondering if we should replace it with a Partial object so maintainers know we can configure options for it, something like this (I'm not 100% on the TypeScript usage):

import { Options } from "html2canvas";
// ...
export const screenshotElement = (element: HTMLElement): Promise<Blob> => {
  return import("html2canvas")
    .then((module) => {
      const options: Partial<Options> = {};
      const html2canvas = module.default;
      return html2canvas(element, options);
    })
    .then(
    // ...
    );
};

[menghif]

On the Chrome screenshot you can see the message options menu didn't completely close.
I wonder if we should add a delay between clicking "Export as Image" and html2canvas taking a screenshot

I tested this and I found the same problem you described on Firefox and Safari (surprisingly not on Chrome after many attempts). I think adding a delay is a good idea.

[rjwignar]

I think I fixed the color inversion by using a windowWidth of 2.5 * element.scrollWidth (I played around with this setting and found the inverted portion shrunk as I scaled the element.scrollWidth value until it eventually disappeared.

Although, a lot of the text is still pushed-down slightly (most noticeable at the avatar icon, although this already exists in production):

The screenshots don't look the best in light mode either: