Fix simple stats wrapping on mobile (#876)

1 year ago · a8be9f3994
2 changed files with 15 additions and 14 deletions
--- a/src/www/css/app.css
+++ b/src/www/css/app.css
@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.0 | MIT License | https://tailwindcss.com
 */

 /*
@ -688,10 +688,6 @@ video {
  margin-bottom: 4rem;
 }

-.-ml-4 {
-  margin-left: -1rem;
-}
-
 .mb-10 {
  margin-bottom: 2.5rem;
 }
@ -975,6 +971,10 @@ video {
  white-space: nowrap;
 }

+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
 .rounded {
  border-radius: 0.25rem;
 }
@ -1141,6 +1141,11 @@ video {
  padding-bottom: 0.75rem;
 }

+.py-5 {
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+}
+
 .pb-1 {
  padding-bottom: 0.25rem;
 }
@ -1454,10 +1459,6 @@ video {
 }

@media (min-width: 450px) {
-  .xxs\:ml-0 {
-    margin-left: 0px;
-  }
-
  .xxs\:flex-row {
    flex-direction: row;
  }
--- a/src/www/index.html
+++ b/src/www/index.html
@ -18,7 +18,7 @@

 <body class="bg-gray-50 dark:bg-neutral-800">
  <div id="app">
-    <div v-cloak class="container mx-auto max-w-3xl px-5 md:px-0">
+    <div v-cloak class="container mx-auto max-w-3xl px-3 md:px-0">
      <div v-if="authenticated === true">
        <span v-if="requiresPassword"
          class="text-sm text-gray-400 dark:text-neutral-400 mb-10 mr-2 mt-3 cursor-pointer hover:underline float-right"
@ -87,7 +87,7 @@
                </apexchart>
              </div>

-              <div class="relative p-5 z-10 flex flex-col sm:flex-row justify-between gap-3">
+              <div class="relative py-5 px-3 z-10 flex flex-col sm:flex-row justify-between gap-3">
                <div class="flex gap-3 md:gap-4 w-full items-center ">

                  <!-- Avatar -->
@ -162,7 +162,7 @@
                          </span>
                        </span>
                        <!-- Inline Transfer TX -->
-                        <span v-if="!uiTrafficStats && client.transferTx" :title="$t('totalDownload') + bytes(client.transferTx)">
+                        <span v-if="!uiTrafficStats && client.transferTx" class="whitespace-nowrap" :title="$t('totalDownload') + bytes(client.transferTx)">
                          ·
                          <svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd"
@ -173,7 +173,7 @@
                        </span>
                        
                        <!-- Inline Transfer RX -->
-                        <span v-if="!uiTrafficStats && client.transferRx" :title="$t('totalUpload') + bytes(client.transferRx)">
+                        <span v-if="!uiTrafficStats && client.transferRx" class="whitespace-nowrap" :title="$t('totalUpload') + bytes(client.transferRx)">
                          ·
                          <svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd"
@ -183,7 +183,7 @@
                          {{client.transferRxCurrent | bytes}}/s
                        </span>
                        <!-- Last seen -->
-                        <span class="text-gray-400 dark:text-neutral-500" v-if="client.latestHandshakeAt"
+                        <span class="text-gray-400 dark:text-neutral-500 whitespace-nowrap" v-if="client.latestHandshakeAt"
                          :title="$t('lastSeen') + dateTime(new Date(client.latestHandshakeAt))">
                          {{!uiTrafficStats ? " · " : ""}}{{new Date(client.latestHandshakeAt) | timeago}}
                        </span>