diff --git a/src/assets/stylesheets/summary.scss b/src/assets/stylesheets/summary.scss index 7a7e854..809c08e 100644 --- a/src/assets/stylesheets/summary.scss +++ b/src/assets/stylesheets/summary.scss @@ -56,31 +56,54 @@ $hover-blue: #25b3ff; margin-bottom: 50px; } -.summary-iframe { - width: 400px; - height: 400px; - min-height: 1px; - background: transparent; - margin: 10px; - display: block; + +.summary-grid { + width: 100%; + display: grid; + grid-template-columns: repeat(2, 1fr); /* 2 columns */ + grid-gap: 10px; /* Adjust the gap between iframes */ + grid-row-gap: 5px; /* Adjust the gap between rows */ + + + // Debug Borders + border-width: 5px; + border-style: solid; } -.summary-fieldContainer-pp { - width: 25%; - height: 300px; - border-radius: 20px; - text-align: center; - padding: 10px; +.summary-iframe { + width: 100%; /* Ensure iframes take up full width of their grid cell */ + height: 300px; /* Adjust the height of iframes */ + + // Debug Borders + border-width: 5px; + border-style: solid; } +// .summary-iframe { +// width: 400px; +// height: 400px; +// min-height: 1px; +// background: transparent; +// margin: 10px; +// display: block; +// } + +// .summary-fieldContainer-pp { +// width: 25%; +// height: 300px; +// border-radius: 20px; +// text-align: center; +// padding: 10px; +// } + .summary-fieldContainer-graph { width: 25%; } -.summary-fieldContainer-dashboard { - width: 100%; - height: 300px; - border-radius: 20px; - text-align: center; - padding: 10px; -} \ No newline at end of file +// .summary-fieldContainer-dashboard { +// width: 100%; +// height: 300px; +// border-radius: 20px; +// text-align: center; +// padding: 10px; +// } \ No newline at end of file diff --git a/src/components/SummaryComponent.js b/src/components/SummaryComponent.js index b83ea00..7320e3e 100644 --- a/src/components/SummaryComponent.js +++ b/src/components/SummaryComponent.js @@ -8,33 +8,35 @@ export default class SummaryComponent extends Component {