diff --git a/course/format/amd/build/local/content/section.min.js b/course/format/amd/build/local/content/section.min.js
index 65dadcf7abb..278795bd38d 100644
--- a/course/format/amd/build/local/content/section.min.js
+++ b/course/format/amd/build/local/content/section.min.js
@@ -6,6 +6,6 @@ define("core_courseformat/local/content/section",["exports","core_courseformat/l
    * @class      core_courseformat/local/content/section
    * @copyright  2021 Ferran Recio <ferran@moodle.com>
    * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
-   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_header=_interopRequireDefault(_header),_dndsection=_interopRequireDefault(_dndsection);class _default extends _dndsection.default{create(){this.name="content_section",this.selectors={SECTION_ITEM:"[data-for='section_title']",CM:'[data-for="cmitem"]'},this.classes={LOCKED:"editinprogress"},this.id=this.element.dataset.id}stateReady(state){if(this.configState(state),this.reactive.isEditing&&this.reactive.supportComponents){const sectionItem=this.getElement(this.selectors.SECTION_ITEM);if(sectionItem){const headerComponent=new _header.default({...this,element:sectionItem,fullregion:this.element});this.configDragDrop(headerComponent)}}}getWatchers(){return[{watch:"section[".concat(this.id,"]:updated"),handler:this._refreshSection}]}validateDropData(dropdata){return("section"!==(null==dropdata?void 0:dropdata.type)||0==this.reactive.sectionReturn)&&super.validateDropData(dropdata)}getLastCm(){const cms=this.getElements(this.selectors.CM);return cms&&0!==cms.length?cms[cms.length-1]:null}_refreshSection(_ref){var _element$dragging,_element$locked;let{element:element}=_ref;this.element.classList.toggle(this.classes.DRAGGING,null!==(_element$dragging=element.dragging)&&void 0!==_element$dragging&&_element$dragging),this.element.classList.toggle(this.classes.LOCKED,null!==(_element$locked=element.locked)&&void 0!==_element$locked&&_element$locked),this.locked=element.locked}}return _exports.default=_default,_exports.default}));
+   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_header=_interopRequireDefault(_header),_dndsection=_interopRequireDefault(_dndsection);class _default extends _dndsection.default{create(){this.name="content_section",this.selectors={SECTION_ITEM:"[data-for='section_title']",CM:'[data-for="cmitem"]',SECTIONINFO:'[data-for="sectioninfo"]'},this.classes={LOCKED:"editinprogress",HASDESCRIPTION:"description"},this.id=this.element.dataset.id}stateReady(state){if(this.configState(state),this.reactive.isEditing&&this.reactive.supportComponents){const sectionItem=this.getElement(this.selectors.SECTION_ITEM);if(sectionItem){const headerComponent=new _header.default({...this,element:sectionItem,fullregion:this.element});this.configDragDrop(headerComponent)}}}getWatchers(){return[{watch:"section[".concat(this.id,"]:updated"),handler:this._refreshSection}]}validateDropData(dropdata){return("section"!==(null==dropdata?void 0:dropdata.type)||0==this.reactive.sectionReturn)&&super.validateDropData(dropdata)}getLastCm(){const cms=this.getElements(this.selectors.CM);return cms&&0!==cms.length?cms[cms.length-1]:null}_refreshSection(_ref){var _element$dragging,_element$locked;let{element:element}=_ref;this.element.classList.toggle(this.classes.DRAGGING,null!==(_element$dragging=element.dragging)&&void 0!==_element$dragging&&_element$dragging),this.element.classList.toggle(this.classes.LOCKED,null!==(_element$locked=element.locked)&&void 0!==_element$locked&&_element$locked),this.locked=element.locked;const sectioninfo=this.getElement(this.selectors.SECTIONINFO);sectioninfo&&sectioninfo.classList.toggle(this.classes.HASDESCRIPTION,element.hasrestrictions)}}return _exports.default=_default,_exports.default}));
 
 //# sourceMappingURL=section.min.js.map
\ No newline at end of file
diff --git a/course/format/amd/build/local/content/section.min.js.map b/course/format/amd/build/local/content/section.min.js.map
index 609a6e4999a..199f3f7acd6 100644
--- a/course/format/amd/build/local/content/section.min.js.map
+++ b/course/format/amd/build/local/content/section.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"section.min.js","sources":["../../../src/local/content/section.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Course section format component.\n *\n * @module     core_courseformat/local/content/section\n * @class      core_courseformat/local/content/section\n * @copyright  2021 Ferran Recio <ferran@moodle.com>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport Header from 'core_courseformat/local/content/section/header';\nimport DndSection from 'core_courseformat/local/courseeditor/dndsection';\n\nexport default class extends DndSection {\n\n    /**\n     * Constructor hook.\n     */\n    create() {\n        // Optional component name for debugging.\n        this.name = 'content_section';\n        // Default query selectors.\n        this.selectors = {\n            SECTION_ITEM: `[data-for='section_title']`,\n            CM: `[data-for=\"cmitem\"]`,\n        };\n        // Most classes will be loaded later by DndCmItem.\n        this.classes = {\n            LOCKED: 'editinprogress',\n        };\n\n        // We need our id to watch specific events.\n        this.id = this.element.dataset.id;\n    }\n\n    /**\n     * Initial state ready method.\n     *\n     * @param {Object} state the initial state\n     */\n    stateReady(state) {\n        this.configState(state);\n        // Drag and drop is only available for components compatible course formats.\n        if (this.reactive.isEditing && this.reactive.supportComponents) {\n            // Section zero and other formats sections may not have a title to drag.\n            const sectionItem = this.getElement(this.selectors.SECTION_ITEM);\n            if (sectionItem) {\n                // Init the inner dragable element.\n                const headerComponent = new Header({\n                    ...this,\n                    element: sectionItem,\n                    fullregion: this.element,\n                });\n                this.configDragDrop(headerComponent);\n            }\n        }\n    }\n\n    /**\n     * Component watchers.\n     *\n     * @returns {Array} of watchers\n     */\n    getWatchers() {\n        return [\n            {watch: `section[${this.id}]:updated`, handler: this._refreshSection},\n        ];\n    }\n\n    /**\n     * Validate if the drop data can be dropped over the component.\n     *\n     * @param {Object} dropdata the exported drop data.\n     * @returns {boolean}\n     */\n    validateDropData(dropdata) {\n        // If the format uses one section per page sections dropping in the content is ignored.\n       if (dropdata?.type === 'section' && this.reactive.sectionReturn != 0) {\n            return false;\n        }\n        return super.validateDropData(dropdata);\n    }\n\n    /**\n     * Get the last CM element of that section.\n     *\n     * @returns {element|null}\n     */\n    getLastCm() {\n        const cms = this.getElements(this.selectors.CM);\n        // DndUpload may add extra elements so :last-child selector cannot be used.\n        if (!cms || cms.length === 0) {\n            return null;\n        }\n        return cms[cms.length - 1];\n    }\n\n    /**\n     * Update a course index section using the state information.\n     *\n     * @param {object} param\n     * @param {Object} param.element details the update details.\n     */\n    _refreshSection({element}) {\n        // Update classes.\n        this.element.classList.toggle(this.classes.DRAGGING, element.dragging ?? false);\n        this.element.classList.toggle(this.classes.LOCKED, element.locked ?? false);\n        this.locked = element.locked;\n    }\n}\n"],"names":["DndSection","create","name","selectors","SECTION_ITEM","CM","classes","LOCKED","id","this","element","dataset","stateReady","state","configState","reactive","isEditing","supportComponents","sectionItem","getElement","headerComponent","Header","fullregion","configDragDrop","getWatchers","watch","handler","_refreshSection","validateDropData","dropdata","type","sectionReturn","super","getLastCm","cms","getElements","length","classList","toggle","DRAGGING","dragging","locked"],"mappings":";;;;;;;;oMA2B6BA,oBAKzBC,cAESC,KAAO,uBAEPC,UAAY,CACbC,0CACAC,+BAGCC,QAAU,CACXC,OAAQ,uBAIPC,GAAKC,KAAKC,QAAQC,QAAQH,GAQnCI,WAAWC,eACFC,YAAYD,OAEbJ,KAAKM,SAASC,WAAaP,KAAKM,SAASE,kBAAmB,OAEtDC,YAAcT,KAAKU,WAAWV,KAAKN,UAAUC,iBAC/Cc,YAAa,OAEPE,gBAAkB,IAAIC,gBAAO,IAC5BZ,KACHC,QAASQ,YACTI,WAAYb,KAAKC,eAEhBa,eAAeH,mBAUhCI,oBACW,CACH,CAACC,wBAAkBhB,KAAKD,gBAAekB,QAASjB,KAAKkB,kBAU7DC,iBAAiBC,iBAES,aAAnBA,MAAAA,gBAAAA,SAAUC,OAAqD,GAA/BrB,KAAKM,SAASgB,gBAG1CC,MAAMJ,iBAAiBC,UAQlCI,kBACUC,IAAMzB,KAAK0B,YAAY1B,KAAKN,UAAUE,WAEvC6B,KAAsB,IAAfA,IAAIE,OAGTF,IAAIA,IAAIE,OAAS,GAFb,KAWfT,gEAAgBjB,QAACA,mBAERA,QAAQ2B,UAAUC,OAAO7B,KAAKH,QAAQiC,mCAAU7B,QAAQ8B,+DACxD9B,QAAQ2B,UAAUC,OAAO7B,KAAKH,QAAQC,+BAAQG,QAAQ+B,yDACtDA,OAAS/B,QAAQ+B"}
\ No newline at end of file
+{"version":3,"file":"section.min.js","sources":["../../../src/local/content/section.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Course section format component.\n *\n * @module     core_courseformat/local/content/section\n * @class      core_courseformat/local/content/section\n * @copyright  2021 Ferran Recio <ferran@moodle.com>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport Header from 'core_courseformat/local/content/section/header';\nimport DndSection from 'core_courseformat/local/courseeditor/dndsection';\n\nexport default class extends DndSection {\n\n    /**\n     * Constructor hook.\n     */\n    create() {\n        // Optional component name for debugging.\n        this.name = 'content_section';\n        // Default query selectors.\n        this.selectors = {\n            SECTION_ITEM: `[data-for='section_title']`,\n            CM: `[data-for=\"cmitem\"]`,\n            SECTIONINFO: `[data-for=\"sectioninfo\"]`,\n        };\n        // Most classes will be loaded later by DndCmItem.\n        this.classes = {\n            LOCKED: 'editinprogress',\n            HASDESCRIPTION: 'description',\n        };\n\n        // We need our id to watch specific events.\n        this.id = this.element.dataset.id;\n    }\n\n    /**\n     * Initial state ready method.\n     *\n     * @param {Object} state the initial state\n     */\n    stateReady(state) {\n        this.configState(state);\n        // Drag and drop is only available for components compatible course formats.\n        if (this.reactive.isEditing && this.reactive.supportComponents) {\n            // Section zero and other formats sections may not have a title to drag.\n            const sectionItem = this.getElement(this.selectors.SECTION_ITEM);\n            if (sectionItem) {\n                // Init the inner dragable element.\n                const headerComponent = new Header({\n                    ...this,\n                    element: sectionItem,\n                    fullregion: this.element,\n                });\n                this.configDragDrop(headerComponent);\n            }\n        }\n    }\n\n    /**\n     * Component watchers.\n     *\n     * @returns {Array} of watchers\n     */\n    getWatchers() {\n        return [\n            {watch: `section[${this.id}]:updated`, handler: this._refreshSection},\n        ];\n    }\n\n    /**\n     * Validate if the drop data can be dropped over the component.\n     *\n     * @param {Object} dropdata the exported drop data.\n     * @returns {boolean}\n     */\n    validateDropData(dropdata) {\n        // If the format uses one section per page sections dropping in the content is ignored.\n       if (dropdata?.type === 'section' && this.reactive.sectionReturn != 0) {\n            return false;\n        }\n        return super.validateDropData(dropdata);\n    }\n\n    /**\n     * Get the last CM element of that section.\n     *\n     * @returns {element|null}\n     */\n    getLastCm() {\n        const cms = this.getElements(this.selectors.CM);\n        // DndUpload may add extra elements so :last-child selector cannot be used.\n        if (!cms || cms.length === 0) {\n            return null;\n        }\n        return cms[cms.length - 1];\n    }\n\n    /**\n     * Update a course index section using the state information.\n     *\n     * @param {object} param\n     * @param {Object} param.element details the update details.\n     */\n    _refreshSection({element}) {\n        // Update classes.\n        this.element.classList.toggle(this.classes.DRAGGING, element.dragging ?? false);\n        this.element.classList.toggle(this.classes.LOCKED, element.locked ?? false);\n        this.locked = element.locked;\n        // The description box classes depends on the section state.\n        const sectioninfo = this.getElement(this.selectors.SECTIONINFO);\n        if (sectioninfo) {\n            sectioninfo.classList.toggle(this.classes.HASDESCRIPTION, element.hasrestrictions);\n        }\n    }\n}\n"],"names":["DndSection","create","name","selectors","SECTION_ITEM","CM","SECTIONINFO","classes","LOCKED","HASDESCRIPTION","id","this","element","dataset","stateReady","state","configState","reactive","isEditing","supportComponents","sectionItem","getElement","headerComponent","Header","fullregion","configDragDrop","getWatchers","watch","handler","_refreshSection","validateDropData","dropdata","type","sectionReturn","super","getLastCm","cms","getElements","length","classList","toggle","DRAGGING","dragging","locked","sectioninfo","hasrestrictions"],"mappings":";;;;;;;;oMA2B6BA,oBAKzBC,cAESC,KAAO,uBAEPC,UAAY,CACbC,0CACAC,yBACAC,6CAGCC,QAAU,CACXC,OAAQ,iBACRC,eAAgB,oBAIfC,GAAKC,KAAKC,QAAQC,QAAQH,GAQnCI,WAAWC,eACFC,YAAYD,OAEbJ,KAAKM,SAASC,WAAaP,KAAKM,SAASE,kBAAmB,OAEtDC,YAAcT,KAAKU,WAAWV,KAAKR,UAAUC,iBAC/CgB,YAAa,OAEPE,gBAAkB,IAAIC,gBAAO,IAC5BZ,KACHC,QAASQ,YACTI,WAAYb,KAAKC,eAEhBa,eAAeH,mBAUhCI,oBACW,CACH,CAACC,wBAAkBhB,KAAKD,gBAAekB,QAASjB,KAAKkB,kBAU7DC,iBAAiBC,iBAES,aAAnBA,MAAAA,gBAAAA,SAAUC,OAAqD,GAA/BrB,KAAKM,SAASgB,gBAG1CC,MAAMJ,iBAAiBC,UAQlCI,kBACUC,IAAMzB,KAAK0B,YAAY1B,KAAKR,UAAUE,WAEvC+B,KAAsB,IAAfA,IAAIE,OAGTF,IAAIA,IAAIE,OAAS,GAFb,KAWfT,gEAAgBjB,QAACA,mBAERA,QAAQ2B,UAAUC,OAAO7B,KAAKJ,QAAQkC,mCAAU7B,QAAQ8B,+DACxD9B,QAAQ2B,UAAUC,OAAO7B,KAAKJ,QAAQC,+BAAQI,QAAQ+B,yDACtDA,OAAS/B,QAAQ+B,aAEhBC,YAAcjC,KAAKU,WAAWV,KAAKR,UAAUG,aAC/CsC,aACAA,YAAYL,UAAUC,OAAO7B,KAAKJ,QAAQE,eAAgBG,QAAQiC"}
\ No newline at end of file
diff --git a/course/format/amd/src/local/content/section.js b/course/format/amd/src/local/content/section.js
index 28de7c8d1ee..7ac06971508 100644
--- a/course/format/amd/src/local/content/section.js
+++ b/course/format/amd/src/local/content/section.js
@@ -37,10 +37,12 @@ export default class extends DndSection {
         this.selectors = {
             SECTION_ITEM: `[data-for='section_title']`,
             CM: `[data-for="cmitem"]`,
+            SECTIONINFO: `[data-for="sectioninfo"]`,
         };
         // Most classes will be loaded later by DndCmItem.
         this.classes = {
             LOCKED: 'editinprogress',
+            HASDESCRIPTION: 'description',
         };
 
         // We need our id to watch specific events.
@@ -120,5 +122,10 @@ export default class extends DndSection {
         this.element.classList.toggle(this.classes.DRAGGING, element.dragging ?? false);
         this.element.classList.toggle(this.classes.LOCKED, element.locked ?? false);
         this.locked = element.locked;
+        // The description box classes depends on the section state.
+        const sectioninfo = this.getElement(this.selectors.SECTIONINFO);
+        if (sectioninfo) {
+            sectioninfo.classList.toggle(this.classes.HASDESCRIPTION, element.hasrestrictions);
+        }
     }
 }
diff --git a/course/format/templates/local/content/section/content.mustache b/course/format/templates/local/content/section/content.mustache
index dc9dc088883..50daad080d9 100644
--- a/course/format/templates/local/content/section/content.mustache
+++ b/course/format/templates/local/content/section/content.mustache
@@ -128,7 +128,7 @@
     class="content {{^iscoursedisplaymultipage}}
         {{^sitehome}}course-content-item-content collapse {{^contentcollapsed}}show{{/contentcollapsed}}{{/sitehome}}
     {{/iscoursedisplaymultipage}}">
-    <div class="{{#hasavailability}}description small{{/hasavailability}} my-3">
+    <div class="{{#hasavailability}}description{{/hasavailability}} my-3" data-for="sectioninfo">
     {{#summary}}
         {{$ core_courseformat/local/content/section/summary }}
             {{> core_courseformat/local/content/section/summary }}
diff --git a/theme/boost/scss/moodle/course.scss b/theme/boost/scss/moodle/course.scss
index 23adab1cce5..3a106c82a48 100644
--- a/theme/boost/scss/moodle/course.scss
+++ b/theme/boost/scss/moodle/course.scss
@@ -1132,7 +1132,6 @@ span.editinstructions {
     }
 
     > div {
-        display: inline-block;
         float: right;
 
         > div {
@@ -1340,6 +1339,8 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
 }
 
 .description .course-description-item {
+    @include font-size($small-font-size);
+
     background-color: $gray-100;
     padding-left: map-get($spacers, 3);
     padding-right: map-get($spacers, 3);
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 6f6914d6a4d..400d7157498 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -14561,7 +14561,6 @@ span.editinstructions {
     display: inline-block;
     text-align: left; }
   .coursecat-management-header > div {
-    display: inline-block;
     float: right; }
     .coursecat-management-header > div > div {
       margin: 10px 0 10px 1em;
@@ -14707,6 +14706,7 @@ span.editinstructions {
     display: inline-block; }
 
 .description .course-description-item {
+  font-size: 80%;
   background-color: #f8f9fa;
   padding-left: 1rem;
   padding-right: 1rem; }
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 730d37c8215..464c5595811 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -14561,7 +14561,6 @@ span.editinstructions {
     display: inline-block;
     text-align: left; }
   .coursecat-management-header > div {
-    display: inline-block;
     float: right; }
     .coursecat-management-header > div > div {
       margin: 10px 0 10px 1em;
@@ -14707,6 +14706,7 @@ span.editinstructions {
     display: inline-block; }
 
 .description .course-description-item {
+  font-size: 80%;
   background-color: #f8f9fa;
   padding-left: 1rem;
   padding-right: 1rem; }