Page footers should collapse to single column at mobile width

[jimjam-slam]

Bug description

The page-footer option in Quarto is really handy, and I particularly like that you can lay content out in three column sections. But on mobile widths, these columns should collapse into a single column—anything more than the most minimal footer content is not readable when it only takes up one third of a mobile screen width.

Compare the following example on desktop and mobile:

I would recommend that this collapse by default, but you could add a collapse option to page-footer to allow users to control this if they really want a non-collapsible footer.

Steps to reproduce

Create a default Quarto website with quarto create.

Then add a page-footer key to _quarto.yml with left, center and right entries:

project:
  type: website

website:
  title: "."
  navbar:
    left:
      - href: index.qmd
        text: Home
      - about.qmd
  page-footer:
    left: |
      Adipisicing esse nulla ea incididunt sit. Veniam fugiat reprehenderit incididunt ea enim nulla est fugiat proident reprehenderit cillum excepteur cillum. Non dolor esse officia duis nisi exercitation occaecat aliqua. Voluptate est sit dolore. Exercitation dolore pariatur in ullamco pariatur est.
    center: |
      Duis cupidatat laborum adipisicing. Proident laboris ipsum aute et cillum cupidatat ullamco in quis excepteur pariatur ea reprehenderit aliquip. Elit mollit sit aute consequat sunt. Esse reprehenderit mollit velit eiusmod incididunt excepteur tempor sunt ullamco consectetur cillum culpa laborum consequat esse. Ullamco duis occaecat sint excepteur occaecat officia laboris est eiusmod esse. Sunt ullamco Lorem est ex aliqua. In mollit officia nostrud fugiat elit ullamco cupidatat sunt non ex et excepteur voluptate. Id proident exercitation ad excepteur anim ipsum et.
    right: |
      Ea sint elit pariatur reprehenderit cupidatat. Esse esse ad duis ipsum magna ipsum aute. Anim occaecat consequat elit qui exercitation eu cillum eu laborum. Ad irure ipsum mollit sunt veniam exercitation. Do ut sunt elit est.

format:
  html:
    theme: cosmo
    css: styles.css
    toc: true

Expected behavior

I expect that the three columns of the footer collapse into a single column at smaller widths to facilitate layout.

Actual behavior

Three separate columns remain in a row even at short widths, distorting most forms of content.

Note: I originally ran this on a pre-release from about 9 weeks ago. The issue persisted when I upgraded to the latest pre-release, but my quarto check is throwing an error (seen below) around Jupyter. I don't typically use Jupyter, so that could be why. I don't think it's relevant to this issue.

Your environment

• IDE: VScode 1.85.1
• OS: macOS 14.2.1 Sonoma

Quarto check output

Quarto 99.9.9
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.11: OK
      Dart Sass version 1.69.5: OK
      Deno version 1.37.2: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 99.9.9
      Path: /Users/jgol0005/code/quarto-cli/package/dist/bin

[✓] Checking tools....................OK
      TinyTeX: (not installed)
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Tex:  (not detected)

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.9.7 (Conda)
      Path: /Users/jgol0005/miniforge3/bin/python
      Jupyter: 4.9.2
      Kernels: python3

Traceback (most recent call last):
  File "/Users/jgol0005/code/quarto-cli/src/resources/jupyter/jupyter.py", line 21, in <module>
    from notebook import notebook_execute, RestartKernel
  File "/Users/jgol0005/Code/quarto-cli/src/resources/jupyter/notebook.py", line 14, in <module>
    from yaml import safe_load
ModuleNotFoundError: No module named 'yaml'
[✓] Checking Jupyter engine render....OK

ERROR: Error
    at renderFiles (file:///Users/jgol0005/code/quarto-cli/src/command/render/render-files.ts:346:23)
    at eventLoopTick (ext:core/01_core.js:183:11)
    at async render (file:///Users/jgol0005/code/quarto-cli/src/command/render/render-shared.ts:99:18)
    at async checkJupyterRender (file:///Users/jgol0005/code/quarto-cli/src/command/check/check.ts:279:18)
    at async file:///Users/jgol0005/code/quarto-cli/src/command/check/check.ts:239:11
    at async withSpinner (file:///Users/jgol0005/code/quarto-cli/src/core/console.ts:81:12)
    at async checkJupyterInstallation (file:///Users/jgol0005/code/quarto-cli/src/command/check/check.ts:235:9)
    at async check (file:///Users/jgol0005/code/quarto-cli/src/command/check/check.ts:59:7)
    at async Command.fn (file:///Users/jgol0005/code/quarto-cli/src/command/check/cmd.ts:34:5)
    at async Command.execute (file:///Users/jgol0005/code/quarto-cli/src/vendor/deno.land/x/cliffy@v0.25.4/command/command.ts:1790:7)

[cderv]

my quarto check is throwing an error (seen below) around Jupyter.

About this, I believe this is only a matter of installing the required Python packages in your environment https://quarto.org/docs/computations/python.html#installation
You have a Python install detected, but it does not have all the required packages installed.

[mcanouil]

@cderv Rather than an error, should this be a "not OK" message instead? Because of the error you don't even get the whole check.

[cderv]

This is a topic for another thread but yeah we could improve the way quarto check is working if you have ideas. So do add to an existing quarto check improvement issue or create a new feature request. Best will be to probably make all improvement at once for all the checks. Thanks

[jimjam-slam]

Yeah, sorry! I started filing the issue around the footer, realised my pre-release was a bit out of date, upgraded and then hit the quarto check issue 😅