fix: center slides better for iframed content

frontend/src/components/editor/renderers/slides-layout/slides-layout.tsx

@@ -24,7 +24,7 @@ export const SlidesLayoutRenderer: React.FC<Props> = ({
   const isReading = mode === "read";
 
   const slides = (
-    <LazySlidesComponent forceKeyboardNavigation={true}>
+    <LazySlidesComponent forceKeyboardNavigation={true} className="flex-1">
       {cells.map((cell) => {
         const isOutputEmpty = cell.output == null || cell.output.data === "";
         if (isOutputEmpty) {
@@ -45,10 +45,10 @@ export const SlidesLayoutRenderer: React.FC<Props> = ({
   );
 
   if (isReading) {
-    return <div className="p-4">{slides}</div>;
+    return <div className="p-4 flex flex-col flex-1 max-h-[95%]">{slides}</div>;
   }
 
-  return <div className="pr-9">{slides}</div>;
+  return <div className="pr-18 pb-5 flex-1 flex flex-col">{slides}</div>;
 };
 
 interface SlideProps extends Pick<CellRuntimeState, "output" | "status"> {

frontend/src/components/slides/slides-component.tsx

@@ -95,7 +95,7 @@ const SlidesComponent = ({
               }}
               className={cn(
                 "h-full w-full flex box-border overflow-y-auto overflow-x-hidden",
-                isFullscreen ? "p-20" : "p-6",
+                isFullscreen ? "p-20" : "p-6 pb-12",
               )}
             >
               <div className="mo-slide-content">{child}</div>

frontend/src/components/slides/slides.css

@@ -68,6 +68,7 @@ so we are resetting this back to initial. */
   width: 100%;
   display: flex;
   justify-content: center;
+  min-height: fit-content;
 
   /* width is normally set to 100%, but we want the content to be centered around
   the width needed. */
@@ -79,6 +80,11 @@ so we are resetting this back to initial. */
     width: unset;
   }
 
+  /* If the first output is the only child, make it flex 1 */
+  > *:only-child > .output:only-child {
+    flex: 1;
+  }
+
   /* Components that should be full width when in slides mode */
   div:has(> marimo-ui-element > marimo-vega) {
     display: block !important;

marimo/_smoke_tests/slides_examples/centered_slides.py

@@ -0,0 +1,71 @@
+import marimo
+
+__generated_with = "0.16.0"
+app = marimo.App(
+    width="medium",
+    layout_file="layouts/centered_slides.slides.json",
+)
+
+
+@app.cell
+def _():
+    import marimo as mo
+
+    mo.iframe("https://marimo.io/")
+    return (mo,)
+
+
+@app.cell
+def _(mo):
+    mo.iframe("https://marimo.io/", height="600px")
+    return
+
+
+@app.cell
+def _(mo):
+    mo.hstack(
+        [mo.iframe("https://marimo.io/"), mo.iframe("https://marimo.io/")],
+        widths="equal",
+    )
+    return
+
+
+@app.cell
+def _(mo):
+    mo.vstack([mo.iframe("https://marimo.io/"), mo.iframe("https://marimo.io/")])
+    return
+
+
+@app.cell
+def _():
+    import altair as alt
+    import polars as pl
+
+    df = pl.read_parquet(
+        "https://github.com/uwdata/mosaic/raw/main/data/athletes.parquet"
+    )
+    df
+
+    df.plot.bar("sport", "count()", color="sex").properties(height=400)
+    return
+
+
+@app.cell
+def _(mo):
+    import plotly.express as px
+
+    _df = px.data.gapminder().query("country=='Germany'")
+    fig = px.line(_df, x="year", y="lifeExp", title="Life expectancy in Germany")
+
+    mo.ui.plotly(fig)
+    return (fig,)
+
+
+@app.cell
+def _(fig, mo):
+    mo.vstack([mo.md("## Chart with a title"), mo.ui.plotly(fig)])
+    return
+
+
+if __name__ == "__main__":
+    app.run()

marimo/_smoke_tests/slides_examples/layouts/centered_slides.slides.json

@@ -0,0 +1,4 @@
+{
+  "type": "slides",
+  "data": {}
+}