From 33bf091c39dcece8b86b81334b5e648cb9030ba6 Mon Sep 17 00:00:00 2001
From: Aditya Bhalsod <abhalsod-sonata@2u.com>
Date: Tue, 2 Jun 2026 05:49:44 +0000
Subject: [PATCH] feat: add unit page styling and edit button functionality to
 container view

- Introduced new styles for the unit page container, enhancing the header layout and actions.
- Added an edit title button for non-root xblocks, improving user interaction for title modifications.
- Updated the body class in the container template to conditionally include 'is-unit-page' based on the context.
---
 cms/static/sass/views/_container.scss    | 94 ++++++++++++++++++++++++
 cms/templates/container.html             |  2 +-
 cms/templates/studio_xblock_wrapper.html |  6 ++
 3 files changed, 101 insertions(+), 1 deletion(-)

diff --git a/cms/static/sass/views/_container.scss b/cms/static/sass/views/_container.scss
index ee48e71deb74..1ba5ec7e476b 100644
--- a/cms/static/sass/views/_container.scss
+++ b/cms/static/sass/views/_container.scss
@@ -445,6 +445,100 @@
   }
 }
 
+.view-container.is-unit-page {
+  .wrapper-xblock {
+    .xblock-header-primary {
+      .header-details {
+        display: flex;
+        align-items: center;
+        min-width: 0;
+
+        .xblock-display-title {
+          min-width: 0;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .title-edit-button.unit-rename-button {
+        @include transition(opacity $tmg-f3 linear 0s);
+
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        margin-left: ($baseline/4);
+        padding: ($baseline/4);
+        border: none;
+        background: transparent;
+        color: $ui-link-color;
+        opacity: 0;
+
+        .icon {
+          font-style: normal;
+        }
+
+        &:hover {
+          color: $uxpl-blue-hover-active;
+        }
+
+        &:focus {
+          opacity: 1;
+          outline: none;
+          box-shadow: 0 0 0 2px rgba($ui-link-color, 0.4);
+        }
+      }
+
+      &:hover .title-edit-button.unit-rename-button {
+        opacity: 1;
+      }
+    }
+
+    .header-actions .action-edit .edit-button.action-button {
+      @include transition(all $tmg-f3 linear 0s);
+
+      display: inline-flex;
+      align-items: center;
+      height: ($baseline*1.75);
+      border: 1px solid $ui-link-color;
+      border-radius: 4px;
+      background: transparent;
+      color: $ui-link-color;
+      padding: ($baseline/4) ($baseline/2);
+
+      .fa-pencil {
+        display: none;
+      }
+
+      .action-button-text {
+        padding: 0;
+        line-height: 1.4;
+        text-transform: none;
+      }
+
+      &:hover {
+        background-color: $ui-link-color;
+        color: $white;
+      }
+
+      &:focus {
+        outline: none;
+        box-shadow: inset 0 0 0 2px $ui-link-color;
+      }
+    }
+
+    .header-actions .show-actions-menu-button.action-button {
+      border-radius: 4px;
+    }
+  }
+
+  input.xblock-inline-title-editor {
+    padding-top: 0;
+    padding-bottom: 0;
+    font-weight: font-weight(semi-bold);
+  }
+}
 
 .move-xblock-modal {
   button {
diff --git a/cms/templates/container.html b/cms/templates/container.html
index 1c56740ca9e3..1ae153c56b4a 100644
--- a/cms/templates/container.html
+++ b/cms/templates/container.html
@@ -22,7 +22,7 @@
 %>
 
 <%block name="title">${xblock.display_name_with_default} ${xblock_type_display_name(xblock)}</%block>
-<%block name="bodyclass">is-signedin course container view-container</%block>
+<%block name="bodyclass">is-signedin course container view-container${' is-unit-page' if is_unit_page else ''}</%block>
 
 <%namespace name='static' file='static_content.html'/>
 
diff --git a/cms/templates/studio_xblock_wrapper.html b/cms/templates/studio_xblock_wrapper.html
index 4fb3c71803cb..51ab18a8b85d 100644
--- a/cms/templates/studio_xblock_wrapper.html
+++ b/cms/templates/studio_xblock_wrapper.html
@@ -137,6 +137,12 @@
                 <p class="xblock-group-visibility-label">${selected_groups_label}</p>
                 % endif
             </div>
+            % if can_edit and not is_root and not selectable:
+            <button type="button" data-tooltip="${_('Edit Title')}" class="btn-default title-edit-button unit-rename-button">
+                <span class="icon fa fa-pencil" aria-hidden="true"></span>
+                <span class="sr">${_("Edit Title")}</span>
+            </button>
+            % endif
         </div>
         <div class="header-actions">
             <ul class="actions-list nav-dd ui-right">