/openstack/install: Needless horizontal scrolling of instructions

[matthewpaulthomas]

On the Install Openstack page, the instructions are laid out with headings {grid-column-end: span 6;} and details {grid-column-end: span 6;}.

This results in a lot of horizontal scrolling of code blocks in the details, and a lot of space between most of the headings and their details.

Both problems are much improved with 4 and 8 rather than 6 and 6:

It might be even better to use 3 and 9.

---

Reported from: https://ubuntu.com/openstack/install

[SirSamTumless]

Can we get you input here @lyubomir-popov

[lyubomir-popov]

I agree with @matthewpaulthomas. Due to the layout being baked into the split list pattern, this will take some hacking around. We should fix this in vanilla, any column classes should override the pattern layout.

I would do something like this:

It follows the column distribution in the section above. Also I've removed the h3 and added the instructions word to the h2:

<div class="p-strip" id="single-node-deployment">
  <div class="row">
    <h2>Single-node OpenStack deployment instructions</h2>
    <div class="col-8 col-start-large-5">
      <p class="">These instructions use <a href="https://snapcraft.io/microstack"
          class="p-link--external">MicroStack</a>, an upstream single-node OpenStack deployment which can run directly
        on your workstation. MicroStack is OpenStack in a <a href="https://snapcraft.io/"
          class="p-link--external">snap</a> which means that all services and supporting libraries are together in a
        single package that can be easily installed, upgraded or removed. MicroStack includes all key OpenStack
        components: Keystone, Nova, Neutron, Glance, and is evolving extremely fast. You can use it for development,
        prototyping and testing, but it is also perfectly suitable for the network edge, IoT and appliances.</p>
    </div>
  </div>
  <div class="u-fixed-width">
  </div>
  <ol class="p-stepped-list--detailed p-strip is-shallow">
    <li class="row">
      <div class="col-4">
        <h4 class="p-stepped-list__title">Install MicroStack</h4>
      </div>
      <div class="col-8">
        <div class="p-stepped-list__content">
          <p>If you are using Ubuntu 18.04 LTS or later, which we highly recommend, you can install MicroStack right
            away by running the following command from the terminal:</p>
          <div class="p-code-copyable">
            <input aria-label="code snippet" class="p-code-copyable__input"
              value="sudo snap install microstack --classic --edge" readonly="readonly">
            <button class="p-code-copyable__action">Copy to clipboard</button>
          </div>
          <p>However, if you are using an older Ubuntu version or different Linux distribution, you need to install
            snapd first. Refer to the <a href="https://snapcraft.io/docs/installing-snapd"
              class="p-link--external">documentation</a> for more information on installing snapd on your Linux
            distribution.</p>
          <p>Once installed, you should see the following message on the terminal:</p>
          <pre><code>microstack (edge) stein from Canonical✓ installed</code></pre>
          <p>The version displayed (here, Stein) matches the most recent stable OpenStack release available with
            MicroStack.</p>
        </div>
      </div>
    </li>
  </ol>
</div>

P.S. Can we please stop using bordered light grey strips... Grey / white already creates a boundary between the two sections.

[anthonydillon]

We should not couple the grid with patterns as that becomes uncontrollable and will break if one is unavailable. I would suggest creating a modifier for this pattern to adjust the layout to give more room for the detail. This allows us to be confident of the usage and stop people using col-1 and col-11 which would look broken and we would be supporting that.

[SirSamTumless]

Peter has used the other wider pattern to solve this.