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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
                <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>
After
90
91
92

93
94
95
96
97
98
99
100
101
102



103
104
105
                <div class="col-auto language-names pe-1">
                  <div>js</div>
                  <div>css</div>
⁣
                  <div>other</div>
                </div>
                <div class="col ps-0">
                  <div class="flex-grow-1 d-flex">
                    <div class="lang-diff plus-1"></div><div class="lang-diff minus-1"></div>
                  </div>
                  <div class="flex-grow-1 d-flex">
                    <div class="lang-diff plus-2"></div><div class="lang-diff minus-2"></div>
                  </div>
                  <div class="flex-grow-1 d-flex">
⁣
⁣
⁣
                    <div class="lang-diff plus-4"></div><div class="lang-diff minus-4"></div>
                  </div>
                </div>
              </div>
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
135
136
137
138
139
140
141
142

143
144
145
146
147
148
149
150
151
152



153
154
155
                </div>
              </div>
            </div>
            <div class="col-4">
              <div class="row">
                <div class="col-auto language-names pe-1">
                  <div>js</div>
                  <div>css</div>
⁣
                  <div>other</div>
                </div>
                <div class="col ps-0">
                  <div class="flex-grow-1 d-flex">
                    <div class="lang-diff plus-1"></div><div class="lang-diff minus-1"></div>
                  </div>
                  <div class="flex-grow-1 d-flex">
                    <div class="lang-diff plus-2"></div><div class="lang-diff minus-2"></div>
                  </div>
                  <div class="flex-grow-1 d-flex">
⁣
⁣
⁣
                    <div class="lang-diff plus-4"></div><div class="lang-diff minus-4"></div>
                  </div>
                </div>
              </div>
After
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
                </div>
              </div>
            </div>
            <div class="col col-lg-4">
              <div class="row">
                <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>
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;
    }
  }
}