.gitattributes

@@ -7,3 +7,4 @@ db/schema.rb linguist-generated
 vendor/* linguist-vendored
 config/credentials/*.yml.enc diff=rails_credentials
 config/credentials.yml.enc diff=rails_credentials
+* text=auto eol=lf

Gemfile.lock

@@ -477,7 +477,7 @@ GEM
     stimulus-rails (1.3.4)
       railties (>= 6.0.0)
     stringio (3.1.5)
-    stripe (14.0.0)
+    stripe (15.0.0)
     tailwindcss-rails (4.2.1)
       railties (>= 7.0.0)
       tailwindcss-ruby (~> 4.0)

app/views/onboardings/preferences.html.erb

@@ -1,11 +1,11 @@
 <div class="bg-gray-25 h-screen flex flex-col justify-between">
   <%= render "onboardings/header" %>
 
-  <div class="grow max-w-lg w-full mx-auto bg-gray-25 flex flex-col justify-center" data-controller="onboarding">
+  <div class="grow max-w-lg w-full mx-auto bg-gray-25 flex flex-col justify-center py-12 px-4" data-controller="onboarding">
     <div>
-      <div class="space-y-1 mb-6">
+      <div class="space-y-1 mb-6 w-full text-center">
         <h1 class="text-2xl font-medium"><%= t(".title") %></h1>
-        <p class="text-secondary text-sm"><%= t(".subtitle") %></p>
+        <p class="text-secondary text-xs md:text"><%= t(".subtitle") %></p>
       </div>
 
       <div class="p-1 bg-alpha-black-25 mb-2 rounded-lg">
@@ -40,7 +40,7 @@
 
           <% placeholder_series = Series.from_raw_values(placeholder_series_data) %>
 
-          <div class="flex items-center w-2/5">
+          <div class="hidden md:flex items-center w-2/5">
             <div class="h-12 w-full">
               <div
                 id="previewChart"
@@ -54,7 +54,7 @@
         </div>
       </div>
 
-      <p class="text-secondary text-xs mb-4"><%= t(".preview") %></p>
+      <p class="text-secondary text-xs mb-4 w-full text-center"><%= t(".preview") %></p>
 
       <%= styled_form_with model: @user, data: { turbo: false } do |form| %>
         <%= form.hidden_field :onboarded_at, value: Time.current %>

app/views/onboardings/profile.html.erb

@@ -1,9 +1,9 @@
 <div class="bg-gray-25 h-screen flex flex-col justify-between">
   <%= render "onboardings/header" %>
 
-  <div class="grow max-w-lg w-full mx-auto bg-gray-25 flex flex-col justify-center">
+  <div class="grow max-w-lg w-full mx-auto bg-gray-25 flex flex-col justify-center py-12 px-4">
     <div>
-      <div class="space-y-1 mb-6">
+      <div class="space-y-1 mb-6 w-full text-center">
         <h1 class="text-2xl font-medium"><%= t(".title") %></h1>
         <p class="text-secondary text-sm"><%= t(".subtitle") %></p>
       </div>
@@ -12,12 +12,12 @@
         <%= form.hidden_field :redirect_to, value: @invitation ? "home" : "onboarding_preferences" %>
         <%= form.hidden_field :onboarded_at, value: Time.current if @invitation %>
 
-        <div class="space-y-4 mb-4">
+        <div class="mb-4 flex justify-center">
           <p class="text-secondary text-xs"><%= t(".profile_image") %></p>
           <%= render "settings/user_avatar_field", form: form, user: @user %>
         </div>
 
-        <div class="flex justify-between items-center gap-4 mb-4">
+        <div class="flex-col md:flex-row md:justify-between md:items-center md:gap-4 mb-4">
           <%= form.text_field :first_name, placeholder: t(".first_name"), label: t(".first_name"), container_class: "bg-white w-1/2", required: true %>
           <%= form.text_field :last_name, placeholder: t(".last_name"), label: t(".last_name"), container_class: "bg-white w-1/2", required: true %>
         </div>

app/views/settings/_user_avatar_field.html.erb

@@ -1,6 +1,6 @@
 <%# locals: (form:, user:) %>
 
-<div class="flex items-center gap-4" data-controller="profile-image-preview">
+<div class="flex flex-col items-center md:itmes-start md:flex-row md:gap-4" data-controller="profile-image-preview">
   <div class="relative flex justify-center items-center bg-gray-50 w-24 h-24 rounded-full border-alpha-black-300 border border-dashed">
 
     <%# The image preview once user has uploaded a new file  %>
@@ -34,10 +34,10 @@
     </button>
   </div>
 
-  <div>
+  <div class=" flex flex-col itmes-center space-y-2 text-center mt-3 md:block">
     <%= form.hidden_field :delete_profile_image, value: "0", data: { profile_image_preview_target: "deleteProfileImage" } %>
 
-    <p class="mb-3"><%= t(".accepted_formats") %></p>
+    <p class="text-subdued text-xs md:text-sm md:order-1 order-3"><%= t(".accepted_formats") %></p>
 
     <%= form.label :profile_image, t(".choose"),
         class: "btn btn--outline inline-block" %>