Configuring DocC tutorial layout

@kaascevich1 has been working on some tutorials for SwiftCrossUI and it reminded me of something that has bugged me about DocC tutorial rendering in the past. In particular, the 'steps' column of the layout can often appear rather cramped. In our case, the steps sometimes contain long-ish file paths or longer form descriptions. The default tutorial layout seems more tailored towards very succinct tutorials with lots of steps and an emphasis on visual content.

I believe that the trade-off between the width of the 'steps' column and the 'visual content' column can be quite content-specific, and as a consequence of that I believe it should be possible to configure whatever the DocC renderer is using to decide the widths of the two columns (which appears to be [some hardcoded CSS rules]( swift-docc-render/src/components/Tutorial/SectionSteps.vue at dc47cbc06e4e574ab9c75e0585fb708c9172051d · swiftlang/swift-docc-render · GitHub ) at the moment).

I also think that it would be nice to be able to get the steps to extend further out to the left. Anything to give the prose a bit more width would be welcome, as the current layout is a bit cramped.

Here's the same page but at 133% zoom in an attempt to preview how it might look on a smaller or lower dpi screen.

1 Like