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
156
157
158

159





















































160
              </div>
            </div>
          </div>
⁣
          
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
        </div>
      </div>
After
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
              </div>
            </div>
          </div>

          <!-- 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>
          
        </div>
      </div>