💄 (app) better responsive design

src/components/DevSession.vue

@@ -64,6 +64,7 @@ export default defineComponent({
 .dev-session {
   h2 {
     font-size: 24pt;
+    margin-bottom: 0;
   }
 
   input {

src/components/IntervalInput.vue

@@ -40,7 +40,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api'
+import { defineComponent, computed } from '@vue/composition-api'
 import { useInterval } from '../hooks/useInterval'
 
 export default defineComponent({
@@ -48,8 +48,22 @@ export default defineComponent({
   props: {
     editable: { type: Boolean, required: true }
   },
-  setup() {
-    const { minus, plus, label } = useInterval()
+  setup(props) {
+    const { interval, minInterval, minus, plus } = useInterval()
+
+    const label = computed(() => {
+      if (interval.value > 1) {
+        return props.editable
+          ? `${interval.value} minutes`
+          : `${interval.value} minute session`
+      }
+
+      if (interval.value === minInterval) {
+        return props.editable ? '30 seconds' : '30 second session'
+      }
+
+      return `${interval.value} minute`
+    })
 
     return {
       minus,

src/components/ZoneMusic.vue

@@ -65,6 +65,9 @@ label[data-pm-holder] {
     }
   }
 }
+.pm-field {
+  margin-bottom: 0;
+}
 .disabled {
   color: desaturate($color, 70%);
 }