styles

5 files changed, 8 insertions, 11 deletions

diff --git a/src/components/ItemForm.svelte b/src/components/ItemForm.svelte
index bd300344..7e0f58d8 100644
--- a/src/components/ItemForm.svelte
+++ b/src/components/ItemForm.svelte
@@ -97,7 +97,7 @@
   <div class="w-full">
     <label for="img" class="font-bold mb-1 block">{$t("items.image")}</label>
 
-    <div class="grid grid-cols-2 gap-4">
+    <div class="grid sm:grid-cols-2 gap-4">
       <div class="h-64 rounded-2xl overflow-hidden">
         {#if src}
           <img
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index b3d9f842..9a5de39a 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -78,9 +78,7 @@
       </div>
     {/if}
 
-    <div
-      class="flex flex-wrap gap-3 justify-center w-full text-xl"
-    >
+    <div class="flex flex-wrap gap-3 justify-center w-full text-xl">
       <a href={`/send`} class="contents grow">
         <button
           type="button"
@@ -122,7 +120,7 @@
   {/if}
 
   <div
-    class="grid grid-cols-1 md:grid-cols-2 gap-4"
+    class="grid sm:grid-cols-2 gap-4"
     class:pb-20={total > 0}
     use:dndzone={{ items, flipDurationMs, dropTargetStyle, dragDisabled }}
     on:consider={consider}
@@ -201,8 +199,7 @@
               {#if i.quantity}
                 <button
                   type="button"
-                  on:click|stopPropagation={() =>
-                    i.quantity++}
+                  on:click|stopPropagation={() => i.quantity++}
                 >
                   <Icon icon="plus" style="w-10 min-w-10" />
                 </button>
diff --git a/src/routes/(app)/[username]/invoice/[id]/+page.svelte b/src/routes/(app)/[username]/invoice/[id]/+page.svelte
index 68d9d4c7..dca98c39 100644
--- a/src/routes/(app)/[username]/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/[username]/invoice/[id]/+page.svelte
@@ -184,12 +184,12 @@
 
   <button
     type="button"
-    class="flex gap-2 text-center break-all rounded-2xl hover:opacity-80 py-5 px-6 w-full mx-auto justify-center border bg-black text-white text-2xl"
+    class="flex gap-2 text-center break-all rounded-2xl hover:opacity-80 py-5 px-6 w-full mx-auto justify-center border bg-black text-white text-xl whitespace-nowrap"
     on:click={() => copy(txt)}
   >
     <Icon icon="copy" style="w-8 my-auto invert" />
     <div class="my-auto font-bold">
-      {txt.substr(0, 11)}..{txt.substr(-11)}
+      {txt.substr(0, 11)}..{txt.substr(-10)}
     </div>
   </button>
 
diff --git a/src/routes/(app)/[username]/items/[id]/+page.svelte b/src/routes/(app)/[username]/items/[id]/+page.svelte
index 49619a33..65720350 100644
--- a/src/routes/(app)/[username]/items/[id]/+page.svelte
+++ b/src/routes/(app)/[username]/items/[id]/+page.svelte
@@ -10,7 +10,7 @@
   let { item, user } = data;
 </script>
 
-<div class="container max-w-xl mx-auto">
+<div class="container max-w-xl mx-auto px-4">
   <h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
     {$t("items.edit")}
   </h1>
diff --git a/src/routes/(app)/[username]/items/create/+page.svelte b/src/routes/(app)/[username]/items/create/+page.svelte
index b81f0423..b82889c9 100644
--- a/src/routes/(app)/[username]/items/create/+page.svelte
+++ b/src/routes/(app)/[username]/items/create/+page.svelte
@@ -11,7 +11,7 @@
   let item = {};
 </script>
 
-<div class="container max-w-xl mx-auto">
+<div class="container max-w-xl mx-auto px-4">
   <h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
     {$t("items.add")}
   </h1>