env example and cosmetic changes

.env.example

@@ -0,0 +1 @@
+DATABASE_URL="postgres://USERNAME:PASSWORD@HOST:PORT/DATABASE"

pages/basic.vue

@@ -62,7 +62,7 @@ onMounted(() => {
 <template>
   <div>
     <div v-if="status === 'success'">
-      <div class="grid grid-cols-4">
+      <div class="grid grid-cols-4 min-h-dvh">
         <div class="col-span-3 flex flex-col gap-4 p-4">
           <div class="flex flex-row gap-5">
             <div>
@@ -81,9 +81,9 @@ onMounted(() => {
             </div>
           </div>
           <div
-            class="select-none z-[-1] w-full flex items-center justify-center *:object-contain *:object-contain *:*:object-contain"
+            class="select-none z-[-1] w-full flex items-center justify-center *:object-contain *:object-contain *:*:object-contain flex-1"
           >
-            <div class="w-[650px] *:w-full">
+            <div class="w-full *:w-full">
               <img
                 :src="cdnUrl + [media.fileName, media.fileType].join('.')"
                 alt=""
@@ -165,14 +165,15 @@ onMounted(() => {
           <div>
             <button @click="next()" class="btn-major">Następne pytanie</button>
           </div>
+
+          <br />
+          {{ questionaries }}
+          <progress max="100" ref="progres">Aha...</progress>
         </div>
       </div>
-      <br />
-      {{ questionaries }}
     </div>
     <div v-else-if="status === 'error'">Error: {{ error }}</div>
     <div v-else>Loading...</div>
-    <progress max="100" ref="progres">Aha...</progress>
   </div>
 </template>