improvement(design): further fixes to design on small screens, added links to watchers page in the docs whenmissing browser or editor buckets

Author: ErikBjare

src/views/activity/Activity.vue

@@ -1,37 +1,37 @@
 <template lang="pug">
 div
-  h2 Activity for {{ periodReadable }}
+  h3 Activity for {{ periodReadable }}
 
-  p
+  div.mb-2
     | Host: {{ host }}
     br
     | Active time: {{ $store.state.activity.active.duration | friendlyduration }}
 
-  div.d-flex
-    div.p-1
+  div.mb-2.d-flex
+    div
       b-input-group
         b-input-group-prepend
-          b-button(:to="link_prefix + '/' + previousPeriod() + '/' + subview",
+          b-button.px-2(:to="link_prefix + '/' + previousPeriod() + '/' + subview",
                    variant="outline-dark")
             icon(name="arrow-left")
             //span.d-none.d-md-inline
             //  |  Previous
-        b-select(:value="periodLength", :options="['day', 'week', 'month']",
+        b-select.px-2(:value="periodLength", :options="['day', 'week', 'month']",
                  @change="(periodLength) => setDate(date, periodLength)")
         b-input-group-append
-          b-button(:to="link_prefix + '/' + nextPeriod() + '/' + subview",
+          b-button.px-2(:to="link_prefix + '/' + nextPeriod() + '/' + subview",
                    :disabled="nextPeriod() > today", variant="outline-dark")
             //span.d-none.d-md-inline
             //  |  Next
             icon(name="arrow-right")
 
-    div.p-1(v-if="periodLength === 'day'")
-      input.form-control(id="date" type="date" :value="date" :max="today"
+    div.mx-1(v-if="periodLength === 'day'")
+      input.form-control.px-2(id="date" type="date" :value="date" :max="today"
                          @change="setDate($event.target.value, periodLength)")
 
-    div.p-1.ml-auto
+    div.ml-auto
       b-button-group
-        b-button(@click="refresh(true)", variant="outline-dark")
+        b-button.px-2(@click="refresh(true)", variant="outline-dark")
           icon(name="sync")
           span.d-none.d-md-inline
             |  Refresh

src/views/activity/ActivityBrowser.vue

@@ -1,11 +1,13 @@
 <template lang="pug">
-div
+div.mt-3
   // TODO: Add back option to select a specific browser bucket
   div(v-if="browserBuckets.length <= 0")
     h6 No browser buckets available
-    small Make sure you have a browser watcher installed to use this feature
-  div(v-if="browserBuckets.length > 0")
+    small
+      | This feature requires a browser watcher.
+      | You can find a list of all watchers in #[a(href="https://activitywatch.readthedocs.io/en/latest/watchers.html") the documentation].
 
+  div(v-if="browserBuckets.length > 0")
     h6 Active browser time: {{ $store.state.activity.browser.duration | friendlyduration }}
 
     div.row

src/views/activity/ActivityEditor.vue

@@ -1,9 +1,12 @@
 <template lang="pug">
-div
+div.mt-3
   // TODO: Add back option to choose a specific editor bucket
   div(v-if="editorBuckets.length <= 0")
     h6 No editor buckets available
-    small Make sure you have an editor watcher installed to use this feature
+    small
+      | This feature requires a editor watcher.
+      | You can find a list of editor watchers in #[a(href="https://activitywatch.readthedocs.io/en/latest/watchers.html") the documentation].
+
   div(v-if="editorBuckets.length")
     h6 Active editor time: {{ $store.state.activity.editor.duration | friendlyduration }}
     div.row(style="padding-top: 0.5em;")

src/views/activity/ActivityWindow.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-div
+div.mt-3
   div.row.mb-6
     div.col-md-6
       h5 Top Applications