From 6bbdbbc54064475c549757589c28423a09ffbd84 Mon Sep 17 00:00:00 2001
From: barsa <tumurbarsnarantuya@gmail.com>
Date: Wed, 4 Mar 2026 15:08:54 +0900
Subject: [PATCH] style: tighten contact us page layout and sidebar spacing

---
 .../support/views/PublicContactView.tsx       | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/apps/portal/src/features/support/views/PublicContactView.tsx b/apps/portal/src/features/support/views/PublicContactView.tsx
index 703dd2b8..cf995604 100644
--- a/apps/portal/src/features/support/views/PublicContactView.tsx
+++ b/apps/portal/src/features/support/views/PublicContactView.tsx
@@ -8,11 +8,11 @@ export function PublicContactView() {
   return (
     <div className="max-w-6xl mx-auto px-4 pb-0">
       {/* Header */}
-      <div className="text-center mb-12 pt-8">
+      <div className="text-center mb-10 pt-8">
         <div className="inline-flex items-center justify-center w-16 h-16 bg-primary/10 rounded-2xl mb-4 text-primary">
           <Send className="h-8 w-8" />
         </div>
-        <h1 className="text-4xl sm:text-5xl font-extrabold text-foreground mb-4 tracking-tight">
+        <h1 className="text-4xl sm:text-5xl font-extrabold text-foreground mb-3 tracking-tight">
           Get in Touch
         </h1>
         <p className="text-lg text-muted-foreground max-w-2xl mx-auto leading-relaxed">
@@ -22,20 +22,20 @@ export function PublicContactView() {
       </div>
 
       {/* Two-column layout: Form + Sidebar */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-10 mb-16">
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-14">
         {/* Contact Form - takes 2/3 width */}
         <div className="lg:col-span-2">
           <ContactForm />
         </div>
 
         {/* Sidebar - takes 1/3 width */}
-        <div className="space-y-6">
+        <div className="space-y-4">
           {/* Phone */}
           <a
             href="tel:0120-660-470"
-            className="group flex items-center gap-4 bg-card rounded-2xl border border-border/60 p-5 hover:border-primary/40 hover:shadow-md transition-all duration-200"
+            className="group flex items-center gap-4 bg-card rounded-2xl border border-border/60 p-4 hover:border-primary/40 hover:shadow-md transition-all duration-200"
           >
-            <div className="h-11 w-11 rounded-xl bg-primary/10 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors shrink-0">
+            <div className="h-10 w-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors shrink-0">
               <Phone className="h-5 w-5" />
             </div>
             <div>
@@ -48,8 +48,8 @@ export function PublicContactView() {
           </a>
 
           {/* Live Chat */}
-          <div className="flex items-center gap-4 bg-card rounded-2xl border border-border/60 p-5">
-            <div className="h-11 w-11 rounded-xl bg-blue-500/10 flex items-center justify-center text-blue-500 shrink-0">
+          <div className="flex items-center gap-4 bg-card rounded-2xl border border-border/60 p-4">
+            <div className="h-10 w-10 rounded-xl bg-blue-500/10 flex items-center justify-center text-blue-500 shrink-0">
               <MessageSquare className="h-5 w-5" />
             </div>
             <div>
@@ -61,9 +61,9 @@ export function PublicContactView() {
           {/* Email */}
           <a
             href="mailto:support@assist-solutions.jp"
-            className="group flex items-center gap-4 bg-card rounded-2xl border border-border/60 p-5 hover:border-emerald-500/40 hover:shadow-md transition-all duration-200"
+            className="group flex items-center gap-4 bg-card rounded-2xl border border-border/60 p-4 hover:border-emerald-500/40 hover:shadow-md transition-all duration-200"
           >
-            <div className="h-11 w-11 rounded-xl bg-emerald-500/10 flex items-center justify-center text-emerald-500 group-hover:bg-emerald-500 group-hover:text-white transition-colors shrink-0">
+            <div className="h-10 w-10 rounded-xl bg-emerald-500/10 flex items-center justify-center text-emerald-500 group-hover:bg-emerald-500 group-hover:text-white transition-colors shrink-0">
               <Mail className="h-5 w-5" />
             </div>
             <div>
@@ -75,7 +75,7 @@ export function PublicContactView() {
           </a>
 
           {/* Business Hours */}
-          <div className="bg-muted/30 rounded-2xl p-5">
+          <div className="bg-muted/30 rounded-2xl p-4">
             <div className="flex items-center gap-3 mb-3">
               <Clock className="h-5 w-5 text-muted-foreground" />
               <h3 className="font-bold text-foreground text-sm">Business Hours</h3>
@@ -84,7 +84,7 @@ export function PublicContactView() {
           </div>
 
           {/* Office Location */}
-          <div className="bg-card rounded-2xl border border-border/60 p-5">
+          <div className="bg-card rounded-2xl border border-border/60 p-4">
             <div className="flex items-center gap-3 mb-3">
               <MapPin className="h-5 w-5 text-primary" />
               <h3 className="font-bold text-foreground text-sm">Our Office</h3>