diff --git a/packages/tecrock-simulation/src/components/keys/rock-types.scss b/packages/tecrock-simulation/src/components/keys/rock-types.scss
index 34963b50..be993009 100644
--- a/packages/tecrock-simulation/src/components/keys/rock-types.scss
+++ b/packages/tecrock-simulation/src/components/keys/rock-types.scss
@@ -127,6 +127,9 @@
.selectedRockDiagram {
padding: 5px 0;
text-align: center;
+ svg + svg {
+ margin-top: 4px;
+ }
}
.selectedRockNotes {
width: 248px;
diff --git a/packages/tecrock-table/src/components/report-item/report-item.tsx b/packages/tecrock-table/src/components/report-item/report-item.tsx
index 1354d635..c54b58db 100644
--- a/packages/tecrock-table/src/components/report-item/report-item.tsx
+++ b/packages/tecrock-table/src/components/report-item/report-item.tsx
@@ -12,6 +12,44 @@ import inlineCss from "../table.inline.scss";
// used to replace class names in the `inlineCss` file.
import classMap from "../table.scss";
+// A method to execute any JavaScript code in the report-item iframe. This is necessary to set up table scaling for
+// narrow views and to enable snapshot clicking. This approach is quite limited, but it suffices for our needs in
+// this specific case.
+function runInReportItem() {
+ // Setup table scaling
+ const table = document.body.getElementsByTagName("table")[0];
+ if (!table) {
+ return;
+ }
+ const tableParent = table.parentElement;
+ if (!tableParent) {
+ return;
+ }
+ if (table.offsetWidth > tableParent.offsetWidth) {
+ // Table is wider than its parent, there is a horizontal scrollbar, so we need to scale it down.
+ const originalWidth = table.offsetWidth;
+ const originalHeight = table.offsetHeight;
+ const scale = tableParent.offsetWidth / (originalWidth + 1);
+ table.style.transform = `scale(${scale})`;
+ table.style.width = tableParent.style.width = `${scale * originalWidth}px`;
+ table.style.height = tableParent.style.height = (scale * originalHeight) + "px";
+ tableParent.style.overflow = "hidden";
+ }
+ // Set up the snapshot click handler. This is implemented in the Table component, but it won't work in the report
+ // item because the component is rendered to a string and sent in that form. Fortunately, it's easy to
+ // reimplement it here.
+ const snapshots = document.body.getElementsByTagName("img");
+ for (let i = 0; i < snapshots.length; i++) {
+ const snapshot = snapshots[i];
+ snapshot.addEventListener("click", () => {
+ window.open(snapshot.src, "_blank");
+ });
+ }
+}
+// runInReportItem.name is necessary (rather than just using runInReportItem()) because the webpack optimizer might
+// change function name or even inline the function, which would break the code.
+const reportItemScript = "`;
+
export const reportItemHandler: IGetReportItemAnswerHandler = request => {
const {platformUserId, version, itemsType} = request;
@@ -22,11 +60,17 @@ export const reportItemHandler: IGetReportItemAnswerHandler,
- inlineCss,
- classMap
- );
+ const htmlWithInlineStyles =
+ renderToStringWithCss(
+
,
+ inlineCss,
+ classMap
+ ) +
+ // Add a stringified script tag to the end of the HTML string. It's important to do it after the closing body tag,
+ // because otherwise the script will be executed before the table is rendered. That way we can avoid using
+ // DOM mutation observers to detect when the table is rendered or relying on other callbacks or timing tricks.
+ reportItemScript;
+
items.push({type: "html", html: htmlWithInlineStyles});
sendReportItemAnswer({version, platformUserId, items, itemsType});
} else {
diff --git a/packages/tecrock-table/src/components/table.scss b/packages/tecrock-table/src/components/table.scss
index ae1b634f..99ad6939 100644
--- a/packages/tecrock-table/src/components/table.scss
+++ b/packages/tecrock-table/src/components/table.scss
@@ -11,6 +11,7 @@
table {
border-collapse: collapse;
table-layout: auto;
+ transform-origin: top left;
td, th {
border: 0.5px solid #979797;
diff --git a/packages/tecrock-table/src/components/table.tsx b/packages/tecrock-table/src/components/table.tsx
index 8add2cde..ae30dec2 100644
--- a/packages/tecrock-table/src/components/table.tsx
+++ b/packages/tecrock-table/src/components/table.tsx
@@ -51,14 +51,14 @@ export const Table: React.FC = ({ interactiveState, handleExpandSnapshot
planetViewSnapshot &&