fix display on a mobile device & mark slower tests

src/views/ClaimView.vue

@@ -74,7 +74,8 @@
             </div>
             <div>
               <fa icon="calendar" class="fa-fw text-slate-400" />
-              Recorded {{ veriClaim.issuedAt?.replace(/T/, " ").replace(/Z/, " UTC") }}
+              Recorded
+              {{ veriClaim.issuedAt?.replace(/T/, " ").replace(/Z/, " UTC") }}
             </div>
             <div v-if="veriClaim.claim.image" class="flex justify-center">
               <a :href="veriClaim.claim.image" target="_blank">

src/views/NewEditProjectView.vue

@@ -71,17 +71,17 @@
 
     <textarea
       placeholder="Description"
-      class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
+      class="block w-full rounded border border-slate-400 px-3 py-2"
       rows="5"
       v-model="fullClaim.description"
       maxlength="5000"
     ></textarea>
-    <div class="text-xs text-slate-500 italic -mt-3 mb-4">
+    <div class="text-xs text-slate-500 italic">
       If you want to be contacted, be sure to include your contact information
       -- just remember that this information is public and saved in a public
       history.
     </div>
-    <div class="text-xs text-slate-500 italic -mt-3 mb-4">
+    <div class="text-xs text-slate-500 italic">
       {{ fullClaim.description?.length }}/5000 max. characters
     </div>
 
@@ -89,55 +89,55 @@
       v-model="fullClaim.url"
       placeholder="Website"
       autocapitalize="none"
-      class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
+      class="block w-full rounded border border-slate-400 mt-4 px-3 py-2"
     />
 
-    <div class="flex mb-4 columns-3 w-full">
+    <div>
-      <div class="col-span-1 w-full flex justify-center items-center">
+      <div class="flex items-center mt-4">
-        <span>Starts At</span>
+        <span class="mr-2">Starts At</span>
+        <input
+          v-model="startDateInput"
+          placeholder="Start Date"
+          type="date"
+          class="rounded border border-slate-400 px-3 py-2"
+        />
+        <input
+          :disabled="!startDateInput"
+          placeholder="Start Time"
+          v-model="startTimeInput"
+          type="time"
+          class="rounded border border-slate-400 ml-2 px-3 py-2"
+        />
       </div>
-      <input
-        v-model="startDateInput"
-        placeholder="Start Date"
-        type="date"
-        class="col-span-1 w-full rounded border border-slate-400 px-3 py-2"
-      />
-      <input
-        :disabled="!startDateInput"
-        placeholder="Start Time"
-        v-model="startTimeInput"
-        type="time"
-        class="col-span-1 w-full rounded border border-slate-400 ml-2 px-3 py-2"
-      />
-      <span class="col-span-1 w-full flex justify-center items-center">
-        {{ zoneName }}
-      </span>
-    </div>
 
-    <div class="flex mb-4 columns-3 w-full">
+      <div class="flex w-full justify-end items-center">
-      <div class="col-span-1 w-full flex justify-center items-center">
+        <span class="w-full flex justify-end items-center">
-        <span>Ends at</span>
+          {{ zoneName }} time zone
+        </span>
+      </div>
+
+      <div class="flex items-center">
+        <div class="mr-2">
+          <span>Ends at</span>
+        </div>
+        <input
+          v-model="endDateInput"
+          placeholder="End Date"
+          type="date"
+          class="ml-2 rounded border border-slate-400 px-3 py-2"
+        />
+        <input
+          :disabled="!endDateInput"
+          placeholder="End Time"
+          v-model="endTimeInput"
+          type="time"
+          class="rounded border border-slate-400 ml-2 px-3 py-2"
+        />
       </div>
-      <input
-        v-model="endDateInput"
-        placeholder="End Date"
-        type="date"
-        class="col-span-1 w-full rounded border border-slate-400 px-3 py-2"
-      />
-      <input
-        :disabled="!endDateInput"
-        placeholder="End Time"
-        v-model="endTimeInput"
-        type="time"
-        class="col-span-1 w-full rounded border border-slate-400 ml-2 px-3 py-2"
-      />
-      <span class="col-span-1 w-full flex justify-center items-center">
-        {{ zoneName }}
-      </span>
     </div>
 
     <div
-      class="flex items-center mb-4"
+      class="flex items-center mt-4"
       @click="includeLocation = !includeLocation"
     >
       <input type="checkbox" class="mr-2" v-model="includeLocation" />

test-playwright/20-create-project.spec.ts

@@ -2,7 +2,6 @@ import { test, expect } from '@playwright/test';
 import { importUser } from './testUtils';
 
 test('Create new project, then search for it', async ({ page }) => {
-  test.slow();
 
   // Generate a random string of 16 characters
   let randomString = Math.random().toString(36).substring(2, 18);

test-playwright/25-create-project-x10.spec.ts

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test';
 import { importUser, createUniqueStringsArray } from './testUtils';
 
 test('Create 10 new projects', async ({ page }) => {
-  test.setTimeout(40000); // Set timeout longer since it often fails at 30 seconds
+  test.slow(); // Set timeout longer since it often fails at 30 seconds
 
   const projectCount = 10;
 

test-playwright/50-record-offer.spec.ts

@@ -2,6 +2,8 @@ import { test, expect } from '@playwright/test';
 import { importUser } from './testUtils';
 
 test('Record an offer', async ({ page }) => {
+  test.setTimeout(45000);
+
   // Generate a random string of 3 characters, skipping the "0." at the beginning
   const randomString = Math.random().toString(36).substring(2, 5);
   // Standard title prefix