add a mobile view for new commits mockup

ea6fcd44661f581c205520d53151c0ab2b75c06a

Tucker McKnight <tmcknight@instructure.com> | Sun Mar 08 2026

add a mobile view for new commits mockup
new-commits-page.html:157
Before
157
After
157

          <!-- A COMMIT -->
          <div style="max-width: 400px;">
            <div class="row commit">
              <div class="col">
                <div class="row">
                  <div class="col-auto">
                    <span class="date font-monospace">2026-04-01</span>
                  </div>
                  <div class="col">
                    <span class="bg-danger badge rounded-pill">v1.2</span>
                  </div>
                  <div class="col-auto">
                    <span class="copy-sha m-2">
                      <span class="sha font-monospace">123abc</span>
                      <a href="#">Copy</a>
                    </span>
                  </div>
                </div>
                <div class="row my-2">
                  <a href="#" class="commit-msg">Do a thing that fixes a thing</a>
                </div>
                <div class="row my-2">
                  <div class="col">
                    <span class="author">Tucker McKnight</span>
                    <span class="bg-primary badge rounded-pill"">tuckerm.us</span>
                    
                  </div>
                </div>
                <div class="row mt-2">
                  <div class="col-auto language-names pe-1">
                    <div>js</div>
                    <div>css</div>
                    <div>md</div>
                    <div>other</div>
                  </div>
                  <div class="col ps-0">
                    <div class="flex-grow-1 d-flex">
                      <div class="lang-diff plus-1">+510</div><div class="lang-diff minus-1">-245</div>
                    </div>
                    <div class="flex-grow-1 d-flex">
                      <div class="lang-diff plus-2 text-white">+314</div><div class="lang-diff minus-2 text-white">-275</div>
                    </div>
                    <div class="flex-grow-1 d-flex">
                      <div class="lang-diff plus-3 text-white">+45</div><div class="lang-diff minus-3 text-white">-20</div>
                    </div>
                    <div class="flex-grow-1 d-flex">
                      <div class="lang-diff plus-4 text-white">+890</div><div class="lang-diff minus-4 text-white">-789</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>