fix padding

3 files changed, 134 insertions, 128 deletions

diff --git a/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue b/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue
index a1a95ae8..63698e88 100644
--- a/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue
+++ b/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue
@@ -14,7 +14,7 @@
         <img src="@/assets/images/_sila/collapsed/fan.svg" />
         {{ $t('pageFans.speed') }}
       </b-button>
-      <b-row class="align-items-end p-2">
+      <b-row class="align-items-end p-4">
         <b-col xs="12" md="3" class="pt-2">
           <b-form-group :label="$t('pageFans.labels.warning')">
             <b-form-input
@@ -42,48 +42,50 @@
           </b-button>
         </b-col>
       </b-row>
-      <chart
-        type="fans"
-        :colors="colors"
-        :data="filteredSensors"
-        :warning="fanSpeedWarninig"
-        :shutdown="fanSpeedShutdown"
-      ></chart>
+      <b-col class="pl-4 pr-4">
+        <chart
+          type="fans"
+          :colors="colors"
+          :data="filteredSensors"
+          :warning="fanSpeedWarninig"
+          :shutdown="fanSpeedShutdown"
+        ></chart>
 
-      <b-table
-        v-if="items && items.length > 0"
-        responsive="md"
-        show-empty
-        table-variant="accessory"
-        hover
-        :items="items"
-        :fields="fields"
-        :empty-text="$t('global.table.emptyMessage')"
-      >
-        <template #cell(name)="{ value, index }">
-          <div
-            class="item-color"
-            :style="`background-color: ${colors[index]}`"
-          ></div>
-          {{ value }}
-        </template>
-        <template #cell(minDate)="{ value }">
-          <span style="color: rgb(12, 28, 41)">
-            {{ value.time }}
-          </span>
-          <span>
-            {{ value.date }}
-          </span>
-        </template>
-        <template #cell(maxDate)="{ value }">
-          <span style="color: rgb(12, 28, 41)">
-            {{ value.time }}
-          </span>
-          <span>
-            {{ value.date }}
-          </span>
-        </template>
-      </b-table>
+        <b-table
+          v-if="items && items.length > 0"
+          responsive="md"
+          show-empty
+          table-variant="accessory"
+          hover
+          :items="items"
+          :fields="fields"
+          :empty-text="$t('global.table.emptyMessage')"
+        >
+          <template #cell(name)="{ value, index }">
+            <div
+              class="item-color"
+              :style="`background-color: ${colors[index]}`"
+            ></div>
+            {{ value }}
+          </template>
+          <template #cell(minDate)="{ value }">
+            <span style="color: rgb(12, 28, 41)">
+              {{ value.time }}
+            </span>
+            <span>
+              {{ value.date }}
+            </span>
+          </template>
+          <template #cell(maxDate)="{ value }">
+            <span style="color: rgb(12, 28, 41)">
+              {{ value.time }}
+            </span>
+            <span>
+              {{ value.date }}
+            </span>
+          </template>
+        </b-table>
+      </b-col>
     </div>
   </b-container>
 </template>
diff --git a/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue b/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue
index 89d2bfe1..f635e307 100644
--- a/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue
+++ b/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue
@@ -14,7 +14,7 @@
         <img src="@/assets/images/_sila/collapsed/temperature.svg" />
         {{ $t('pageMemory.temperature') }}
       </b-button>
-      <b-row class="align-items-end p-2">
+      <b-row class="align-items-end p-4">
         <b-col xs="12" md="6" lg="3" class="pt-2">
           <b-form-group :label="$t('pageMemory.labels.notNormal')">
             <b-form-input
@@ -53,48 +53,50 @@
           </b-button>
         </b-col>
       </b-row>
-      <chart
-        type="memory"
-        :colors="colors"
-        :data="filteredSensors"
-        :warning="temperatureWarning"
-        :non-normal="temperatureNonNormal"
-        :critical-start="temperatureCriticalStart"
-      ></chart>
-      <b-table
-        v-if="items && items.length > 0"
-        responsive="md"
-        show-empty
-        table-variant="accessory"
-        hover
-        :items="items"
-        :fields="fields"
-        :empty-text="$t('global.table.emptyMessage')"
-      >
-        <template #cell(name)="{ value, index }">
-          <div
-            class="item-color"
-            :style="`background-color: ${colors[index]}`"
-          ></div>
-          {{ value }}
-        </template>
-        <template #cell(minDate)="{ value }">
-          <span style="color: rgb(12, 28, 41)">
-            {{ value.time }}
-          </span>
-          <span>
-            {{ value.date }}
-          </span>
-        </template>
-        <template #cell(maxDate)="{ value }">
-          <span style="color: rgb(12, 28, 41)">
-            {{ value.time }}
-          </span>
-          <span>
-            {{ value.date }}
-          </span>
-        </template>
-      </b-table>
+      <b-col class="pl-4 pr-4">
+        <chart
+          type="memory"
+          :colors="colors"
+          :data="filteredSensors"
+          :warning="temperatureWarning"
+          :non-normal="temperatureNonNormal"
+          :critical-start="temperatureCriticalStart"
+        ></chart>
+        <b-table
+          v-if="items && items.length > 0"
+          responsive="md"
+          show-empty
+          table-variant="accessory"
+          hover
+          :items="items"
+          :fields="fields"
+          :empty-text="$t('global.table.emptyMessage')"
+        >
+          <template #cell(name)="{ value, index }">
+            <div
+              class="item-color"
+              :style="`background-color: ${colors[index]}`"
+            ></div>
+            {{ value }}
+          </template>
+          <template #cell(minDate)="{ value }">
+            <span style="color: rgb(12, 28, 41)">
+              {{ value.time }}
+            </span>
+            <span>
+              {{ value.date }}
+            </span>
+          </template>
+          <template #cell(maxDate)="{ value }">
+            <span style="color: rgb(12, 28, 41)">
+              {{ value.time }}
+            </span>
+            <span>
+              {{ value.date }}
+            </span>
+          </template>
+        </b-table>
+      </b-col>
     </div>
   </b-container>
 </template>
diff --git a/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue b/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue
index 9f4e46a0..343988f1 100644
--- a/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue
+++ b/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue
@@ -15,7 +15,7 @@
         {{ $t('pageMotherboard.temperature') }}
       </b-button>
       <b-row class="align-items-end p-2">
-        <b-col xs="12" md="3" class="pt-2">
+        <b-col xs="12" md="3" class="pt-4">
           <b-form-group :label="$t('pageMotherboard.labels.warning')">
             <b-form-input
               v-model="temperatureWarningInput"
@@ -31,48 +31,50 @@
           </b-button>
         </b-col>
       </b-row>
-      <chart
-        type="motherboard"
-        :colors="colors"
-        :data="filteredSensors"
-        :warning="temperatureWarning"
-        :non-normal="temperatureNonNormal"
-        :critical-start="temperatureCriticalStart"
-      ></chart>
-      <b-table
-        v-if="items && items.length > 0"
-        responsive="md"
-        show-empty
-        table-variant="accessory"
-        hover
-        :items="items"
-        :fields="fields"
-        :empty-text="$t('global.table.emptyMessage')"
-      >
-        <template #cell(name)="{ value, index }">
-          <div
-            class="item-color"
-            :style="`background-color: ${colors[index]}`"
-          ></div>
-          {{ value }}
-        </template>
-        <template #cell(minDate)="{ value }">
-          <span style="color: rgb(12, 28, 41)">
-            {{ value.time }}
-          </span>
-          <span>
-            {{ value.date }}
-          </span>
-        </template>
-        <template #cell(maxDate)="{ value }">
-          <span style="color: rgb(12, 28, 41)">
-            {{ value.time }}
-          </span>
-          <span>
-            {{ value.date }}
-          </span>
-        </template>
-      </b-table>
+      <b-col class="pl-4 pr-4">
+        <chart
+          type="motherboard"
+          :colors="colors"
+          :data="filteredSensors"
+          :warning="temperatureWarning"
+          :non-normal="temperatureNonNormal"
+          :critical-start="temperatureCriticalStart"
+        ></chart>
+        <b-table
+          v-if="items && items.length > 0"
+          responsive="md"
+          show-empty
+          table-variant="accessory"
+          hover
+          :items="items"
+          :fields="fields"
+          :empty-text="$t('global.table.emptyMessage')"
+        >
+          <template #cell(name)="{ value, index }">
+            <div
+              class="item-color"
+              :style="`background-color: ${colors[index]}`"
+            ></div>
+            {{ value }}
+          </template>
+          <template #cell(minDate)="{ value }">
+            <span style="color: rgb(12, 28, 41)">
+              {{ value.time }}
+            </span>
+            <span>
+              {{ value.date }}
+            </span>
+          </template>
+          <template #cell(maxDate)="{ value }">
+            <span style="color: rgb(12, 28, 41)">
+              {{ value.time }}
+            </span>
+            <span>
+              {{ value.date }}
+            </span>
+          </template>
+        </b-table>
+      </b-col>
     </div>
   </b-container>
 </template>