Refactor CanvasEmbed and CanvasEmbedDialog components (#1066)

- Updated CanvasEmbedPlaceholder to include a fixed height style.
- Set a fixed height for the canvas embed wrapper in renderCanvasEmbed.
- Renamed class for CanvasEmbedDialog to 'roamjs-canvas-dialog' and added a fixed width style.
- Removed unused CSS classes related to canvas embed styles from styles.css.

These changes improve the layout and styling consistency of the canvas embed feature.

Author: mdroidian

apps/roam/src/components/canvas/CanvasEmbed.tsx

@@ -20,7 +20,10 @@ const extractCanvasTitle = (button: HTMLElement): string | null => {
 };
 
 const CanvasEmbedPlaceholder = ({ message }: { message: string }) => (
-  <div className="dg-canvas-embed-placeholder flex items-center justify-center rounded-md border border-dashed border-gray-300 text-sm text-[#8a9ba8]">
+  <div
+    className="flex items-center justify-center rounded-md border border-dashed border-gray-300 text-sm"
+    style={{ height: "100px" }}
+  >
     {message}
   </div>
 );
@@ -49,6 +52,7 @@ export const renderCanvasEmbed = (
 
   const wrapper = document.createElement("div");
   wrapper.className = "dg-canvas-embed my-2 w-full overflow-hidden rounded-md";
+  wrapper.style.height = "400px";
   wrapper.onmousedown = (e: MouseEvent) => e.stopPropagation();
   button.parentElement.appendChild(wrapper);
 

apps/roam/src/components/canvas/CanvasEmbedDialog.tsx

@@ -65,7 +65,8 @@ const CanvasEmbedDialog = ({
       isOpen={isOpen}
       onClose={onClose}
       title="Embed Canvas"
-      className="dg-canvas-embed-dialog pb-0"
+      className="roamjs-canvas-dialog pb-0"
+      style={{ width: "400px" }}
     >
       <div className="p-4">{renderContent()}</div>
     </Dialog>

apps/roam/src/styles/styles.css

@@ -191,26 +191,3 @@
 #dg-left-sidebar-root .bp3-dark .bp3-button:not([class*="bp3-intent-"]):hover {
   color: #f5f8fa;
 }
-
-.dg-canvas-embed {
-  height: 400px;
-}
-
-.dg-canvas-embed > .roamjs-tldraw-canvas-container {
-  height: 100%;
-  width: 100%;
-}
-
-.dg-canvas-embed-placeholder {
-  height: 100px;
-}
-
-.dg-canvas-embed-dialog.bp3-dialog {
-  width: 400px;
-}
-
-.dg-canvas-embed-dialog .roamjs-autocomplete-input-target,
-.dg-canvas-embed-dialog .roamjs-autocomplete-input-target .bp3-input-group {
-  display: block;
-  width: 100%;
-}