responsiveness for commit component

1925bb7b8a5b6a4d9d6bb267f13f2db2708d36fc

Tucker McKnight <tmcknight@instructure.com> | Mon Mar 09 2026

responsiveness for commit component
new-commits-page.html:65
Before
65
66
67
68
69
              <div class="row">
                <div class="col">
                  <span class="bg-danger badge rounded-pill">v1.2</span>
                </div>
              </div>
After
65
66
67
68
69
new-commits-page.html:91
Before
91
92
93
94
95
96
97
                  <div>md</div>
                    <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 class="lang-diff plus-3 text-white">+45</div><div class="lang-diff minus-3 text-white">-20</div>
                    <div class="lang-diff plus-4 text-white">+890</div><div class="lang-diff minus-4 text-white">-789</div>
After
91
92
93
94
95
96
97
                    <div class="lang-diff plus-1"></div><div class="lang-diff minus-1"></div>
                    <div class="lang-diff plus-2"></div><div class="lang-diff minus-2"></div>
                    <div class="lang-diff plus-4"></div><div class="lang-diff minus-4"></div>
new-commits-page.html:114
Before
114
115
116
117
118
119
120
121
122
123
            <div class="col-auto d-flex flex-column justify-content-evenly">
              <div class="row">
                <div class="col">
                  <span class="date font-monospace">2026-04-01</span>
                </div>
              </div>
            <div class="col d-flex flex-column justify-content-evenly">
              <div class="row">
                <a href="#" class="commit-msg">Do a thing that fixes a thing</a>
              <div class="row">
After
114
115
116
117
118
119
120
121
122
123
            <div class="col-lg-auto col-12 commit-date">
              <span class="date mb-1 font-monospace d-inline-block">2026-04-01</span>
              <span class="bg-danger badge rounded-pill d-inline-block">v1.2</span>
            <div class="col-lg col-12">
              <div class="row mb-2">
                <a href="#" class="commit-msg">This one has a different style, and is responsive</a>
              <div class="row mb-3 mb-lg-0">
new-commits-page.html:136
Before
136
137
138
139
            <div class="col-4">
                    <div class="lang-diff plus-1"></div><div class="lang-diff minus-1"></div>
                    <div class="lang-diff plus-2"></div><div class="lang-diff minus-2"></div>
                    <div class="lang-diff plus-4"></div><div class="lang-diff minus-4"></div>
After
136
137
138
139
            <div class="col col-lg-4">
                  <div>md</div>
                    <div class="lang-diff plus-1">+510</div><div class="lang-diff minus-1">-245</div>
                    <div class="lang-diff plus-2 text-white">+314</div><div class="lang-diff minus-2 text-white">-275</div>
                    <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>
new-commits-page.html:177
Before
177
178
                  <a href="#" class="commit-msg">Do a thing that fixes a thing</a>
After
177
178
                  <a href="#" class="commit-msg">A mobile-width example</a>
scss/design-board.scss:192
Before
192
After
192

  .commit-date {
    width: auto;
  }

  @include media-breakpoint-up(lg) {
    .commit-date {
      width: min-content;
    }
  }