responsiveness for commit component

1925bb7b8a5b6a4d9d6bb267f13f2db2708d36fc

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

responsiveness for commit component
new-commits-page.html:65
Before
64
65
66
67
68
69
70
71
72
73
                  <span class="date font-monospace">2026-04-01</span>
                </div>
              </div>
              <div class="row">
                <div class="col">
                  <span class="bg-danger badge rounded-pill">v1.2</span>
                </div>
              </div>
            </div>
            <div class="col d-flex flex-column justify-content-evenly">
              <div class="row">
After
64
65
66





67
68
                  <span class="date font-monospace">2026-04-01</span>
                </div>
              </div>
⁣
⁣
⁣
⁣
⁣
            </div>
            <div class="col d-flex flex-column justify-content-evenly">
              <div class="row">
new-commits-page.html:91
Before
After
new-commits-page.html:114
Before
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

          <!-- A COMMIT -->
          <div class="row commit">
            <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>
            <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>
              <div class="row">
                <div class="col">
                  <span class="author">Tucker McKnight</span>
                  <span class="bg-primary badge rounded-pill"">tuckerm.us</span>
After
113
114
115
116


117

118
119
120
121
122
123
124
125
126

          <!-- A COMMIT -->
          <div class="row commit">
            <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>
            <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>
              <div class="row mb-3 mb-lg-0">
                <div class="col">
                  <span class="author">Tucker McKnight</span>
                  <span class="bg-primary badge rounded-pill"">tuckerm.us</span>
new-commits-page.html:136
Before
After
new-commits-page.html:177
Before
176
177
178
179
180
181
182
183
184
185
186
187
                  </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">
After
176
177
178
179
180
181
182
183
184

185
186
                  </div>
                </div>
                <div class="row my-2">
                  <a href="#" class="commit-msg">A mobile-width example</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">
scss/design-board.scss:192
Before
191
192
193










    background-color: color.adjust($lightblue, $lightness: -25%);
    width: 35%;
  }
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
}
After
191
192
193
194
195
196
197
198
199
200
201
202
203
    background-color: color.adjust($lightblue, $lightness: -25%);
    width: 35%;
  }

  .commit-date {
    width: auto;
  }

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