Tighten up the forecast period panels a bit

src/views/WeatherView.vue

@@ -50,6 +50,10 @@ export default {
             this.coordinates = this.weatherStore.coordinates
         },
 
+        getShortForecast(period) {
+            return period.shortForecast.replace(/Showers And Thunderstorms/g, 'T-storms')
+        },
+
         showHourly(period) {
             this.$router.push('/hourly')
         },
@@ -96,7 +100,7 @@ export default {
                 <img :src="period.icon" />
               </div>
 
-              <p>{{ period.shortForecast }}</p>
+              <p>{{ getShortForecast(period) }}</p>
 
               <p>
                 <span v-if="period.isDaytime">Hi</span>
@@ -138,7 +142,8 @@ export default {
 <style scoped>
 
 .weather-period {
-    min-width: 100px;
+    width: 100px;
+    flex-shrink: 0;
     display: flex;
     flex-direction: column;
     align-items: center;