Fix mobile view.

Author: vsdudakov

fastadmin/static/index.min.css

@@ -135,15 +135,15 @@ export const CrudContainer: React.FC<ICrudContainer> = ({
         <Header
           style={{
             background: colorPrimary,
-            paddingInline: 24,
-            height: 56,
-            lineHeight: "56px",
+            paddingInline: isMobile ? 0 : 20,
+            height: isMobile ? 48 : 56,
+            lineHeight: isMobile ? "48px" : "56px",
             boxShadow: "0 1px 4px rgba(0, 0, 0, 0.08)",
           }}
         >
           <Row justify="space-between" align="middle">
             <Col>
-              <Space size="middle">
+              <Space size={isMobile ? 8 : 16}>
                 {isMobile && (
                   <Menu
                     style={{ background: "transparent", minWidth: 0 }}
@@ -196,7 +196,7 @@ export const CrudContainer: React.FC<ICrudContainer> = ({
               </Space>
             </Col>
             <Col>
-              <Space size="middle">
+              <Space size={isMobile ? 8 : 16}>
                 {!isMobile && (
                   <span
                     style={{
@@ -273,11 +273,16 @@ export const CrudContainer: React.FC<ICrudContainer> = ({
               />
             </Sider>
           )}
-          <Layout style={{ padding: 24, minHeight: "calc(100vh - 56px)" }}>
+          <Layout
+            style={{
+              padding: isMobile ? 8 : 24,
+              minHeight: "calc(100vh - 56px)",
+            }}
+          >
             <Row
               justify="space-between"
               align="middle"
-              style={{ marginBottom: 16 }}
+              style={{ marginBottom: isMobile ? 8 : 16 }}
             >
               <Col>{breadcrumbs}</Col>
               {viewOnSite && (
@@ -305,9 +310,11 @@ export const CrudContainer: React.FC<ICrudContainer> = ({
                 </Row>
               }
               style={{
-                marginTop: 0,
-                borderRadius: 8,
-                boxShadow: "0 1px 4px rgba(0, 0, 0, 0.06)",
+                marginTop: isMobile ? 4 : 0,
+                borderRadius: isMobile ? 6 : 8,
+                boxShadow: isMobile
+                  ? "0 1px 3px rgba(0, 0, 0, 0.05)"
+                  : "0 1px 4px rgba(0, 0, 0, 0.06)",
               }}
             >
               <Skeleton loading={isLoading} active={true}>

fastadmin/static/index.min.js

@@ -249,11 +249,11 @@ export const DashboardActionWidget: React.FC<DashboardActionWidgetProps> = ({
             </Row>
             <pre
               style={{
-                marginTop: 16,
+                marginTop: 12,
                 maxHeight: 240,
                 overflow: "auto",
                 background: "#fafafa",
-                padding: 12,
+                padding: 8,
                 borderRadius: 4,
                 border: "1px solid #f0f0f0",
               }}

frontend/src/components/crud-container/index.tsx

@@ -7,6 +7,7 @@ import { InlineWidget } from "@/components/inline-widget";
 import { getTitleFromFieldName, getTitleFromModel } from "@/helpers/title";
 import { isJson, isSlug } from "@/helpers/transform";
 import { getWidgetCls } from "@/helpers/widgets";
+import { useIsMobile } from "@/hooks/useIsMobile";
 import {
   EFieldWidgetType,
   type IAddConfigurationField,
@@ -41,6 +42,7 @@ export const FormContainer: React.FC<IFormContainer> = ({
   initialValues,
 }) => {
   const { t: _t } = useTranslation("FormContainer");
+  const isMobile = useIsMobile();
 
   const [activeKey, setActiveKey] = useState<string[]>(
     (modelConfiguration?.fieldsets || [])
@@ -285,7 +287,7 @@ export const FormContainer: React.FC<IFormContainer> = ({
           <Divider />
         </>
       )}
-      <Row gutter={[32, 32]}>
+      <Row gutter={isMobile ? [16, 16] : [32, 32]}>
         <Col
           xs={24}
           xl={mode === "inline-add" || mode === "inline-change" ? 24 : 12}

frontend/src/components/dashboard-action-widget/index.tsx

@@ -5,6 +5,7 @@ import { Helmet } from "react-helmet-async";
 import { useNavigate } from "react-router-dom";
 
 import { ROUTES } from "@/constants/routes";
+import { useIsMobile } from "@/hooks/useIsMobile";
 import { SignInUserContext } from "@/providers/SignInUserProvider";
 
 interface ISignInContainer {
@@ -18,6 +19,7 @@ export const SignInContainer: React.FC<ISignInContainer> = ({
 }) => {
   const { signedIn } = useContext(SignInUserContext);
   const navigate = useNavigate();
+  const isMobile = useIsMobile();
 
   useEffect(() => {
     if (signedIn) {
@@ -31,7 +33,7 @@ export const SignInContainer: React.FC<ISignInContainer> = ({
         minHeight: "100vh",
         background:
           "linear-gradient(160deg, #f0f5ff 0%, #f5f5f5 50%, #e8f4f8 100%)",
-        padding: 24,
+        padding: isMobile ? 16 : 24,
       }}
     >
       <Helmet defaultTitle={title}>

frontend/src/components/form-container/index.tsx

@@ -218,7 +218,13 @@ export const List: React.FC = () => {
       }
       viewOnSite={modelConfiguration?.view_on_site}
       headerActions={
-        <Row style={{ marginTop: 10, marginBottom: 10 }} gutter={[8, 8]}>
+        <Row
+          style={{
+            marginTop: isMobile ? 4 : 10,
+            marginBottom: isMobile ? 8 : 10,
+          }}
+          gutter={[8, 8]}
+        >
           {(modelConfiguration?.actions || []).length > 0 &&
             modelConfiguration?.actions_on_top && (
               <Col>

frontend/src/components/sign-in-container/index.tsx

@@ -8,6 +8,7 @@ import { SignInContainer } from "@/components/sign-in-container";
 import { postFetcher } from "@/fetchers/fetchers";
 import { handleError } from "@/helpers/forms";
 import { getTitleFromFieldName } from "@/helpers/title";
+import { useIsMobile } from "@/hooks/useIsMobile";
 import { ConfigurationContext } from "@/providers/ConfigurationProvider";
 import { SignInUserContext } from "@/providers/SignInUserProvider";
 
@@ -18,6 +19,7 @@ export const SignIn: React.FC = () => {
   } = theme.useToken();
   const { configuration } = useContext(ConfigurationContext);
   const { signedInUserRefetch } = useContext(SignInUserContext);
+  const isMobile = useIsMobile();
   const { t: _t } = useTranslation("SignIn");
 
   const { mutate: mutateSignIn, isPending: loadingSignIn } = useMutation({
@@ -39,9 +41,11 @@ export const SignIn: React.FC = () => {
       <Card
         style={{
           maxWidth: 420,
-          margin: "0 auto",
+          margin: isMobile ? "0 auto" : "24px auto",
           borderRadius: 12,
-          boxShadow: "0 8px 24px rgba(0, 0, 0, 0.08)",
+          boxShadow: isMobile
+            ? "0 4px 16px rgba(0, 0, 0, 0.06)"
+            : "0 8px 24px rgba(0, 0, 0, 0.08)",
           border: "none",
         }}
       >
@@ -50,8 +54,8 @@ export const SignIn: React.FC = () => {
             <Space
               direction="vertical"
               align="center"
-              size="middle"
-              style={{ width: "100%", marginBottom: 32 }}
+              size="small"
+              style={{ width: "100%", marginBottom: isMobile ? 20 : 32 }}
             >
               <Image
                 src={`${window.SERVER_DOMAIN ?? ""}${configuration.site_sign_in_logo ?? ""}`}

frontend/src/containers/list/index.tsx

@@ -150,3 +150,52 @@ code {
   border-bottom-left-radius: var(--admin-radius-sm);
   border-bottom-right-radius: var(--admin-radius-sm);
 }
+
+/* Mobile-first spacing adjustments */
+@media (max-width: 768px) {
+  body {
+    padding: 0;
+  }
+
+  /* Reduce global layout padding on small screens */
+  .ant-layout {
+    padding: var(--admin-spacing-xs) !important;
+  }
+
+  .ant-layout-content {
+    padding: var(--admin-spacing-xs) !important;
+  }
+
+  /* Tighter card padding and radius for mobile */
+  .ant-card {
+    border-radius: var(--admin-radius-sm);
+  }
+
+  .ant-card-head {
+    padding-inline: var(--admin-spacing-sm);
+    padding-block: var(--admin-spacing-xs);
+  }
+
+  .ant-card-body {
+    padding: var(--admin-spacing-sm);
+  }
+
+  /* Tighter form spacing for mobile ergonomics */
+  .ant-form-vertical .ant-form-item {
+    margin-bottom: 12px;
+  }
+
+  .ant-form-item-label > label {
+    margin-bottom: 4px;
+  }
+
+  /* Reduce table density slightly on mobile */
+  .ant-table-wrapper .ant-table {
+    border-radius: var(--admin-radius-sm);
+  }
+
+  .ant-table-wrapper .ant-table-thead > tr > th,
+  .ant-table-wrapper .ant-table-tbody > tr > td {
+    padding: 8px 12px;
+  }
+}