clean up some css parts

src/App.vue

@@ -285,7 +285,6 @@ watch(
         <button v-for="preset in sortedPresets" :key="preset.id" class="presetItem" :class="{ selected: selectedPreset === preset }" @click="startPreset(preset)">
           <h3 class="grow left">{{ preset.title || preset.tempo }}</h3>
           <h2>{{ preset.tempo }}</h2>
-          <span style="color: var(--neutral-gray);">bpm</span>
         </button>
       </div>
     </div>

src/assets/main.css

@@ -153,40 +153,33 @@ button#stop {
   margin: 4px;
 }
 
-#presetsItems.list .presetItem {
+.presetItem h3 {
-  align-items: center;
-}
-
-#presetsItems.list .presetItem h2 {
   margin: 4px;
-}
-
-#presetsItems.list .presetItem h3 {
-  text-align: left;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  color: var(--gray);
+  font-weight: lighter;
+  text-align: left;
+}
+
+.presetItem h2 {
+  margin: 4px;
+}
+
+#presetsItems.list .presetItem {
+  align-items: center;
+  padding: 8px;
 }
 
 #presetsItems.grid .presetItem {
   min-width: 86px;
   max-width: 86px;
-  text-align: center;
+
   flex-direction: column;
   padding: 4px;
 }
 
-#presetsItems.grid .presetItem h2 {
-  margin: 4px;
-}
-
-#presetsItems.grid .presetItem h3 {
-  margin: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 .presetItem.selected {
   background-color: var(--primary);
 }