diff --git a/frontend/components/Config.svelte b/frontend/components/Config.svelte index a248809..de3fa3d 100644 --- a/frontend/components/Config.svelte +++ b/frontend/components/Config.svelte @@ -16,6 +16,6 @@ diff --git a/frontend/components/Content.svelte b/frontend/components/Content.svelte index 3a5a730..75b798a 100644 --- a/frontend/components/Content.svelte +++ b/frontend/components/Content.svelte @@ -9,7 +9,7 @@ export let isShared: boolean; function render(payload: string) { - const result = hexy(atob(payload), { width: 16 }); + const result = hexy(atob(payload), { width: 8 }); const resultLines = result.split('\n'); let addressStr = ''; let hexStr = ''; @@ -17,8 +17,8 @@ resultLines.forEach((item, idx) => { if (item) { addressStr += (idx > 0 ? '\n' : '') + item.substring(0, item.indexOf(':')); - hexStr += (idx > 0 ? '\n' : '') + item.substring(item.indexOf(':') + 2, 51); - plainStr += (idx > 0 ? '\n' : '') + item.substring(51); + hexStr += (idx > 0 ? '\n' : '') + item.substring(item.indexOf(':') + 2, 31); + plainStr += (idx > 0 ? '\n' : '') + item.substring(31); } }); return [ @@ -196,7 +196,7 @@ display: flex; justify-content: flex-start; gap: 20px; - min-width: 535px; + min-width: 355px; font-family: monospace; padding-top: 15px; padding-bottom: 15px; @@ -214,6 +214,8 @@ unicode-bidi: embed; font-family: monospace; white-space: pre; + text-wrap: wrap; padding-top: 20px; + word-break: break-all; } diff --git a/frontend/components/Header.svelte b/frontend/components/Header.svelte index 36a13a7..8e7a8db 100644 --- a/frontend/components/Header.svelte +++ b/frontend/components/Header.svelte @@ -40,6 +40,8 @@ border-bottom-style: solid; padding-bottom: 10px; border-width: 1px; + margin-right: 20px; + margin-left: 20px; } .header__link { diff --git a/frontend/components/MessageList.svelte b/frontend/components/MessageList.svelte index 6daa082..6faceea 100644 --- a/frontend/components/MessageList.svelte +++ b/frontend/components/MessageList.svelte @@ -70,11 +70,9 @@ .column { flex: 50%; padding: 15px 20px; - min-width: 300px; } #message-log { - width: 100%; flex-grow: 1; overflow-y: scroll; } diff --git a/frontend/pages/index.svelte b/frontend/pages/index.svelte index 5638cd8..a9b60aa 100644 --- a/frontend/pages/index.svelte +++ b/frontend/pages/index.svelte @@ -102,4 +102,10 @@ bottom: 0; right: 0; } + + @media (width < 710px) { + .row { + flex-direction: column; + } + } diff --git a/public/global.css b/public/global.css index d174c09..c069728 100644 --- a/public/global.css +++ b/public/global.css @@ -8,7 +8,6 @@ body { color: #333; margin: 0; box-sizing: border-box; - padding: 8px;; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; }