diff --git a/addons/web/static/src/views/form/form_controller.js b/addons/web/static/src/views/form/form_controller.js
index b0bd6dfd696..9e327a56aab 100644
--- a/addons/web/static/src/views/form/form_controller.js
+++ b/addons/web/static/src/views/form/form_controller.js
@@ -410,6 +410,13 @@ export class FormController extends Component {
             translateAlertData: toRaw(this.translateAlertData),
         };
     }
+
+    get className() {
+        return {
+            [this.props.className]: true,
+            o_xxs_form_view: this.env.isSmall,
+        };
+    }
 }
 
 FormController.template = `web.FormView`;
diff --git a/addons/web/static/src/views/form/form_controller.xml b/addons/web/static/src/views/form/form_controller.xml
index 9b72bc3253c..61f411c3bac 100644
--- a/addons/web/static/src/views/form/form_controller.xml
+++ b/addons/web/static/src/views/form/form_controller.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="web.FormView" owl="1">
-        <div t-att-class="props.className" t-ref="root">
+        <div t-att-class="className" t-ref="root">
             <Layout className="model.useSampleModel ? 'o_view_sample_data' : ''">
                 <t t-if="showingTranslateAlert[model.root.resId]" t-call="web.TranslateAlert" />
                 <t t-set-slot="layout-buttons">