From 4834ea98e846c3d1e9a29c71a9bd832aa648da96 Mon Sep 17 00:00:00 2001
From: Andrea Connell <andreamconnell@gmail.com>
Date: Tue, 16 Jan 2024 12:31:16 -0800
Subject: [PATCH] Add maxHeight to SDD diagrams to allow growth (#109)

custom.css has a default maxHeight relative to viewport size, which
makes these diagrams squished when they have a width set.
If the width is removed, the diagrams are too small to view.
Setting the maxHeight style here lets them size themselves more
naturally.

Co-authored-by: Andrea Connell <aconnell@jpl.nasa.gov>
---
 docs/overview/software-design-document.mdx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/overview/software-design-document.mdx b/docs/overview/software-design-document.mdx
index 6eb365b..bd57c1a 100644
--- a/docs/overview/software-design-document.mdx
+++ b/docs/overview/software-design-document.mdx
@@ -80,7 +80,7 @@ A](#a---the-c4-model).
 import c4AerieContext from './assets/c4-aerie-context.png';
 
 <figure>
-  <img alt="Aerie Context" src={c4AerieContext} width="512" />
+  <img alt="Aerie Context" src={c4AerieContext} style={{ maxHeight: '100%', width: '700px' }} />
   <figcaption>Figure 1: Aerie Context</figcaption>
 </figure>
 
@@ -119,7 +119,7 @@ merlin-worker has a direct connection to the merlin database.
 import c4AerieContainer from './assets/c4-aerie-container.png';
 
 <figure>
-  <img alt="Aerie Container" src={c4AerieContainer} width="700" />
+  <img alt="Aerie Container" src={c4AerieContainer} style={{ maxHeight: '100%', width: '700px' }} />
   <figcaption>Figure 2: Aerie Composition at the Container Level</figcaption>
 </figure>
 
@@ -408,7 +408,7 @@ defining mission models in a file system.
 import c4MerlinServerComponent from './assets/c4-merlin-server-component.png';
 
 <figure>
-  <img alt="Merlin Server Component" src={c4MerlinServerComponent} width="700" />
+  <img alt="Merlin Server Component" src={c4MerlinServerComponent} style={{ maxHeight: '100%', width: '700px' }} />
   <figcaption>Figure 3: The Component Diagram for Merlin Server</figcaption>
 </figure>
 
@@ -1299,7 +1299,7 @@ aspects:
 import c4SchedulingComponent from './assets/c4-scheduling-component.png';
 
 <figure>
-  <img alt="Scheduling Component" src={c4SchedulingComponent} width="400" />
+  <img alt="Scheduling Component" src={c4SchedulingComponent} style={{ maxHeight: '100%', width: '400px' }} />
   <figcaption>Figure 4: The Aerie Scheduling Component</figcaption>
 </figure>