diff --git a/app/assets/javascripts/work_items/components/work_item_actions.vue b/app/assets/javascripts/work_items/components/work_item_actions.vue
index 6ec62116981eddf644999557912f95f0b82b5579..4ef1f35278610a1670c89d946d7bedaee26917fa 100644
--- a/app/assets/javascripts/work_items/components/work_item_actions.vue
+++ b/app/assets/javascripts/work_items/components/work_item_actions.vue
@@ -1,8 +1,10 @@
 <script>
 import {
   GlDisclosureDropdown,
+  GlDisclosureDropdownGroup,
   GlDisclosureDropdownItem,
   GlDropdownDivider,
+  GlIcon,
   GlLoadingIcon,
   GlModal,
   GlModalDirective,
@@ -61,6 +63,8 @@ export default {
     GlDisclosureDropdown,
     GlDisclosureDropdownItem,
     GlDropdownDivider,
+    GlDisclosureDropdownGroup,
+    GlIcon,
     GlLoadingIcon,
     GlModal,
     GlToggle,
@@ -220,6 +224,14 @@ export default {
       required: false,
       default: '',
     },
+    showSidebar: {
+      type: Boolean,
+      required: true,
+    },
+    truncationEnabled: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {
@@ -360,6 +372,9 @@ export default {
     showMoveButton() {
       return this.workItemType === WORK_ITEM_TYPE_VALUE_ISSUE && this.canMove;
     },
+    toggleSidebarLabel() {
+      return this.showSidebar ? s__('WorkItem|Hide sidebar') : s__('WorkItem|Show sidebar');
+    },
   },
   methods: {
     copyToClipboard(text, message) {
@@ -526,6 +541,7 @@ export default {
               :value="subscribedToNotifications"
               :label="$options.i18n.notifications"
               label-position="left"
+              data-testid="notifications-toggle"
               class="work-item-dropdown-toggle gl-justify-between"
               @change="toggleNotifications($event)"
             />
@@ -639,9 +655,45 @@ export default {
           variant="danger"
           @action="handleDelete"
         >
-          <template #list-item>{{ i18n.deleteWorkItem }}</template>
+          <template #list-item>
+            <span class="gl-text-danger">{{ i18n.deleteWorkItem }}</span>
+          </template>
         </gl-disclosure-dropdown-item>
       </template>
+
+      <gl-disclosure-dropdown-group bordered>
+        <template #group-label>
+          {{ __('View options') }}
+          <gl-icon
+            v-gl-tooltip
+            name="information-o"
+            class="gl-ml-2"
+            variant="link"
+            :title="s__('WorkItem|Change appearance for all issues, epics, and tasks')"
+          />
+        </template>
+        <gl-disclosure-dropdown-item
+          class="gl-flex gl-w-full gl-justify-end"
+          data-testid="truncation-toggle-action"
+          @action="$emit('toggleTruncationEnabled')"
+        >
+          <template #list-item>
+            <gl-toggle
+              :value="truncationEnabled"
+              :label="s__('WorkItem|Truncate descriptions')"
+              label-position="left"
+              class="work-item-dropdown-toggle gl-justify-between"
+            />
+          </template>
+        </gl-disclosure-dropdown-item>
+        <gl-disclosure-dropdown-item
+          data-testid="sidebar-toggle-action"
+          class="work-item-container-xs-hidden gl-hidden md:gl-block"
+          @action="$emit('toggleSidebar')"
+        >
+          <template #list-item>{{ toggleSidebarLabel }}</template>
+        </gl-disclosure-dropdown-item>
+      </gl-disclosure-dropdown-group>
     </gl-disclosure-dropdown>
 
     <gl-modal
diff --git a/app/assets/javascripts/work_items/components/work_item_description.vue b/app/assets/javascripts/work_items/components/work_item_description.vue
index a9e166243c03ccfa4ee0836054aba6da0d2ee7eb..9d5bb38aa28779f8ee986d4f329c0338fbb45f29 100644
--- a/app/assets/javascripts/work_items/components/work_item_description.vue
+++ b/app/assets/javascripts/work_items/components/work_item_description.vue
@@ -105,12 +105,17 @@ export default {
       required: false,
       default: false,
     },
+    truncationEnabled: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   markdownDocsPath: helpPagePath('user/markdown'),
   data() {
     return {
       workItem: {},
-      disableTruncation: false,
+      wasEdited: false,
       isEditing: this.editMode,
       isSubmitting: false,
       isSubmittingWithKeydown: false,
@@ -239,6 +244,12 @@ export default {
         ? `/groups/${this.fullPath}/-/uploads`
         : `/${this.fullPath}/uploads`;
     },
+    enableTruncation() {
+      /* truncationEnabled uses the local storage based setting,
+         wasEdited is a localized override for when user actions on this work item
+         should result in a full description shown. */
+      return this.truncationEnabled && !this.wasEdited;
+    },
   },
   watch: {
     updateInProgress(newValue) {
@@ -338,7 +349,7 @@ export default {
     },
     async startEditing() {
       this.isEditing = true;
-      this.disableTruncation = true;
+      this.wasEdited = true;
 
       this.descriptionText = this.createFlow
         ? this.workItemDescription?.description
@@ -396,7 +407,7 @@ export default {
       updateDraft(this.autosaveKey, this.descriptionText);
     },
     handleDescriptionTextUpdated(newText) {
-      this.disableTruncation = true;
+      this.wasEdited = true;
       this.descriptionText = newText;
       this.$emit('updateDraft', this.descriptionText);
       this.updateWorkItem();
@@ -574,7 +585,7 @@ export default {
       :work-item-id="workItemId"
       :work-item-type="workItemType"
       :can-edit="canEdit"
-      :disable-truncation="disableTruncation"
+      :enable-truncation="enableTruncation"
       :is-group="isGroup"
       :is-updating="isSubmitting"
       :without-heading-anchors="withoutHeadingAnchors"
diff --git a/app/assets/javascripts/work_items/components/work_item_description_rendered.vue b/app/assets/javascripts/work_items/components/work_item_description_rendered.vue
index c57e0bfe147f958e0d4c3138c04e4251d276448c..6ad4080c7c40d86a626a962019b267276aa60a53 100644
--- a/app/assets/javascripts/work_items/components/work_item_description_rendered.vue
+++ b/app/assets/javascripts/work_items/components/work_item_description_rendered.vue
@@ -39,10 +39,9 @@ export default {
   },
   mixins: [trackingMixin],
   props: {
-    disableTruncation: {
+    enableTruncation: {
       type: Boolean,
-      required: false,
-      default: false,
+      required: true,
     },
     isGroup: {
       type: Boolean,
@@ -107,7 +106,7 @@ export default {
       return this.descriptionHtml?.trim() === '';
     },
     isTruncated() {
-      return this.truncated && !this.disableTruncation;
+      return this.truncated && this.enableTruncation;
     },
   },
   watch: {
diff --git a/app/assets/javascripts/work_items/components/work_item_detail.vue b/app/assets/javascripts/work_items/components/work_item_detail.vue
index c60c93dee0a8cba2ba7b0be92efcc45e08655226..dbcbe07623a7350034f84759e39b6c292bee7629 100644
--- a/app/assets/javascripts/work_items/components/work_item_detail.vue
+++ b/app/assets/javascripts/work_items/components/work_item_detail.vue
@@ -13,6 +13,7 @@ import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import { s__, __ } from '~/locale';
 import { getParameterByName, updateHistory, removeParams } from '~/lib/utils/url_utility';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { TYPENAME_GROUP } from '~/graphql_shared/constants';
 import { isLoggedIn } from '~/lib/utils/common_utils';
@@ -102,6 +103,8 @@ export default {
   },
   isLoggedIn: isLoggedIn(),
   VALID_DESIGN_FILE_MIMETYPE,
+  SHOW_SIDEBAR_STORAGE_KEY: 'work_item_show_sidebar',
+  ENABLE_TRUNCATION_STORAGE_KEY: 'work_item_truncate_descriptions',
   components: {
     DesignDropzone,
     DesignWidget,
@@ -110,6 +113,7 @@ export default {
     GlButton,
     GlEmptyState,
     GlIntersectionObserver,
+    LocalStorageSync,
     WorkItemActions,
     TodosToggle,
     WorkItemNotificationsWidget,
@@ -201,6 +205,8 @@ export default {
       isDragDataValid: false,
       isAddingNotes: false,
       info: getParameterByName('resolves_discussion'),
+      showSidebar: true,
+      truncationEnabled: true,
     };
   },
   apollo: {
@@ -560,6 +566,8 @@ export default {
         widgets: this.widgets,
         allowedChildTypes: this.allowedChildTypes,
         namespaceFullName: this.namespaceFullName,
+        showSidebar: this.showSidebar,
+        truncationEnabled: this.truncationEnabled,
       };
     },
   },
@@ -830,6 +838,12 @@ export default {
       this.info = undefined;
       updateHistory({ url: removeParams(['resolves_discussion']) });
     },
+    handleToggleSidebar() {
+      this.showSidebar = !this.showSidebar;
+    },
+    handleTruncationEnabled() {
+      this.truncationEnabled = !this.truncationEnabled;
+    },
   },
   WORK_ITEM_TYPE_VALUE_OBJECTIVE,
   WORKSPACE_PROJECT,
@@ -864,6 +878,8 @@ export default {
       :parent-id="parentWorkItemId"
       :namespace-full-name="namespaceFullName"
       :has-children="hasChildren"
+      :show-sidebar="showSidebar"
+      :truncation-enabled="truncationEnabled"
       @hideStickyHeader="hideStickyHeader"
       @showStickyHeader="showStickyHeader"
       @deleteWorkItem="$emit('deleteWorkItem', { workItemType, workItemId: workItem.id })"
@@ -888,6 +904,8 @@ export default {
           @workItemTypeChanged="workItemTypeChanged"
           @toggleReportAbuseModal="toggleReportAbuseModal"
           @workItemCreated="handleWorkItemCreated"
+          @toggleSidebar="handleToggleSidebar"
+          @toggleTruncationEnabled="handleTruncationEnabled"
         />
       </template>
     </work-item-sticky-header>
@@ -982,6 +1000,8 @@ export default {
                 @workItemTypeChanged="workItemTypeChanged"
                 @toggleReportAbuseModal="toggleReportAbuseModal"
                 @workItemCreated="handleWorkItemCreated"
+                @toggleSidebar="handleToggleSidebar"
+                @toggleTruncationEnabled="handleTruncationEnabled"
               />
             </div>
             <gl-button
@@ -1006,15 +1026,37 @@ export default {
               @updateWorkItem="updateWorkItem"
               @updateDraft="updateDraft('title', $event)"
             />
-            <work-item-created-updated
-              v-if="!editMode"
-              :full-path="workItemFullPath"
-              :work-item-iid="iid"
-              :update-in-progress="updateInProgress"
-            />
+            <div class="gl-flex gl-items-center gl-gap-3">
+              <work-item-created-updated
+                v-if="!editMode"
+                :full-path="workItemFullPath"
+                :work-item-iid="iid"
+                :update-in-progress="updateInProgress"
+                class="gl-grow"
+              />
+              <div v-if="!showSidebar" class="work-item-container-xs-hidden gl-hidden md:gl-block">
+                <gl-button
+                  size="small"
+                  category="secondary"
+                  data-testid="work-item-show-sidebar-button"
+                  icon="sidebar-right"
+                  @click="handleToggleSidebar"
+                >
+                  {{ s__('WorkItem|Show sidebar') }}
+                </gl-button>
+              </div>
+            </div>
           </div>
-          <div data-testid="work-item-overview" class="work-item-overview">
+          <div
+            data-testid="work-item-overview"
+            class="work-item-overview"
+            :class="{ 'sidebar-hidden': !showSidebar }"
+          >
             <section>
+              <local-storage-sync
+                v-model="truncationEnabled"
+                :storage-key="$options.ENABLE_TRUNCATION_STORAGE_KEY"
+              />
               <work-item-description
                 v-if="hasDescriptionWidget"
                 :edit-mode="editMode"
@@ -1024,6 +1066,7 @@ export default {
                 :update-in-progress="updateInProgress"
                 :without-heading-anchors="isDrawer"
                 :hide-fullscreen-markdown-button="isDrawer"
+                :truncation-enabled="truncationEnabled"
                 @updateWorkItem="updateWorkItem"
                 @updateDraft="updateDraft('description', $event)"
                 @cancelEditing="cancelEditing"
@@ -1065,10 +1108,14 @@ export default {
                 </div>
               </div>
             </section>
+            <local-storage-sync
+              v-model="showSidebar"
+              :storage-key="$options.SHOW_SIDEBAR_STORAGE_KEY"
+            />
             <aside
               data-testid="work-item-overview-right-sidebar"
               class="work-item-overview-right-sidebar"
-              :class="{ 'is-modal': isModal }"
+              :class="{ 'is-modal': isModal, 'md:gl-hidden': !showSidebar }"
             >
               <work-item-attributes-wrapper
                 :class="{ 'gl-top-11': isDrawer }"
diff --git a/app/assets/javascripts/work_items/components/work_item_sticky_header.vue b/app/assets/javascripts/work_items/components/work_item_sticky_header.vue
index 2de0a84901b6477374d9f24748d7f97436152510..504b862f585a14ee294bb00a8cabb03a980334bb 100644
--- a/app/assets/javascripts/work_items/components/work_item_sticky_header.vue
+++ b/app/assets/javascripts/work_items/components/work_item_sticky_header.vue
@@ -93,6 +93,14 @@ export default {
       required: false,
       default: false,
     },
+    showSidebar: {
+      type: Boolean,
+      required: true,
+    },
+    truncationEnabled: {
+      type: Boolean,
+      required: true,
+    },
   },
   computed: {
     canUpdate() {
diff --git a/app/assets/stylesheets/page_bundles/work_items.scss b/app/assets/stylesheets/page_bundles/work_items.scss
index dddc32c0f2e85dee1241bbbc578b405c6bed1786..af21afba8235c35953a10aa1f40590462dca2ece 100644
--- a/app/assets/stylesheets/page_bundles/work_items.scss
+++ b/app/assets/stylesheets/page_bundles/work_items.scss
@@ -43,6 +43,10 @@ $work-item-overview-gap-width: 2rem;
     display: block !important;
   }
 
+  .work-item-container-xs-hidden {
+    display: none !important;
+  }
+
   .work-item-attributes-wrapper {
     position: static !important;
     overflow-y: initial !important;
@@ -51,7 +55,7 @@ $work-item-overview-gap-width: 2rem;
   }
 }
 
-.work-item-overview {
+.work-item-overview:not(.sidebar-hidden) {
   @include media-breakpoint-up(md) {
     display: grid;
     // allow the main content area to shrink
diff --git a/doc/user/group/epics/manage_epics.md b/doc/user/group/epics/manage_epics.md
index 1c02cbc8c5bd7e19c7cdeebbbc8c60a54d7210e8..13d44a8f74ade601698a7c7fe706d7c4f7048422 100644
--- a/doc/user/group/epics/manage_epics.md
+++ b/doc/user/group/epics/manage_epics.md
@@ -184,6 +184,58 @@ To open the epic in full view, either:
 
 ![Epic opened in a drawer.](img/epic_drawer_v17_4.png)
 
+## Prevent truncating descriptions with "Read more"
+
+{{< history >}}
+
+- [Introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/181184) in GitLab 17.10.
+
+{{< /history >}}
+
+<!-- When epics as work items are GA and feature flag `work_item_epics` is removed, remove the prerequisite below. -->
+
+If an epic description is long, GitLab displays only part of it.
+To see the whole description, you must select **Read more**.
+This truncation makes it easier to find other elements on the page without scrolling through lengthy text.
+
+Prerequisites:
+
+- Your administrator must have [enabled the new look for epics](epic_work_items.md).
+
+To change whether descriptions are truncated:
+
+1. On an epic, in the upper-right corner, select **More actions** ({{< icon name="ellipsis_v" >}}).
+1. Toggle **Truncate descriptions** according to your preference.
+
+This setting is remembered and affects all issues, tasks, epics, objectives, and key results.
+
+## Hide the right sidebar
+
+{{< history >}}
+
+- [Introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/181184) in GitLab 17.10.
+
+{{< /history >}}
+
+<!-- When epics as work items are GA and feature flag `work_item_epics` is removed, remove the prerequisite below. -->
+
+Epic attributes are shown in a sidebar to the right of the description when space allows.
+
+Prerequisites:
+
+- Your administrator must have [enabled the new look for epics](epic_work_items.md).
+
+To hide the sidebar and increase space for the description:
+
+1. On an epic, in the upper-right corner, select **More actions** ({{< icon name="ellipsis_v" >}}).
+1. Select **Hide sidebar**.
+
+This setting is remembered and affects all issues, tasks, epics, objectives, and key results.
+
+To show the sidebar again:
+
+- Repeat the previous steps and select **Show sidebar**.
+
 ## Assignees
 
 {{< details >}}
diff --git a/doc/user/okrs.md b/doc/user/okrs.md
index 184a64109e229f1503687c74c1b5a8efae47a54a..566f1f1c9d0609131644d97d1ff134902593cb77 100644
--- a/doc/user/okrs.md
+++ b/doc/user/okrs.md
@@ -118,6 +118,47 @@ To edit an OKR:
 1. Optional. To edit the description, select the edit icon ({{< icon name="pencil" >}}), make your changes, and
    select **Save**.
 
+## Prevent truncating descriptions with "Read more"
+
+{{< history >}}
+
+- [Introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/181184) in GitLab 17.10.
+
+{{< /history >}}
+
+If an OKR description is long, GitLab displays only part of it.
+To see the whole description, you must select **Read more**.
+This truncation makes it easier to find other elements on the page without scrolling through lengthy text.
+
+To change whether descriptions are truncated:
+
+1. On an objective or key result, in the upper-right corner, select **More actions** ({{< icon name="ellipsis_v" >}}).
+1. Select **View options**.
+1. Toggle **Truncate descriptions** according to your preference.
+
+This setting is remembered and affects all issues, tasks, epics, objectives, and key results.
+
+## Hide the right sidebar
+
+{{< history >}}
+
+- [Introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/181184) in GitLab 17.10.
+
+{{< /history >}}
+
+Attributes are shown in a sidebar to the right of the description when space allows.
+To hide the sidebar and increase space for the description:
+
+1. On an objective or key result, in the upper-right corner, select **More actions** ({{< icon name="ellipsis_v" >}}).
+1. Select **View options**.
+1. Select **Hide sidebar**.
+
+This setting is remembered and affects all issues, tasks, epics, objectives, and key results.
+
+To show the sidebar again:
+
+- Repeat the previous steps and select **Show sidebar**.
+
 ## View OKR system notes
 
 {{< history >}}
diff --git a/doc/user/project/issues/managing_issues.md b/doc/user/project/issues/managing_issues.md
index 4d0b4bf261781ed36ad6fe21f862fa0cb6b0b172..b28c7ba8cb5eef7665f4c13922984aeb50096117 100644
--- a/doc/user/project/issues/managing_issues.md
+++ b/doc/user/project/issues/managing_issues.md
@@ -504,6 +504,58 @@ Prerequisites:
 Learn how to change the default [issue closing pattern](../../../administration/issue_closing_pattern.md)
 of your installation.
 
+## Prevent truncating descriptions with "Read more"
+
+{{< history >}}
+
+- [Introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/181184) in GitLab 17.10.
+
+{{< /history >}}
+
+<!-- When issues as work items are GA and feature flag `work_items_view_preference` is removed, remove the prerequisite below. -->
+
+If an issue description is long, GitLab displays only part of it.
+To see the whole description, you must select **Read more**.
+This truncation makes it easier to find other elements on the page without scrolling through lengthy text.
+
+Prerequisites:
+
+- Your administrator must have [enabled the new look for issues](issue_work_items.md).
+
+To change whether descriptions are truncated:
+
+1. On an issue, in the upper-right corner, select **More actions** ({{< icon name="ellipsis_v" >}}).
+1. Toggle **Truncate descriptions** according to your preference.
+
+This setting is remembered and affects all issues, tasks, epics, objectives, and key results.
+
+## Hide the right sidebar
+
+{{< history >}}
+
+- [Introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/181184) in GitLab 17.10.
+
+{{< /history >}}
+
+<!-- When issues as work items are GA and feature flag `work_items_view_preference` is removed, remove the prerequisite below. -->
+
+Issue attributes are shown in a sidebar to the right of the description when space allows.
+
+Prerequisites:
+
+- Your administrator must have [enabled the new look for issues](issue_work_items.md).
+
+To hide the sidebar and increase space for the description:
+
+1. On an issue, in the upper-right corner, select **More actions** ({{< icon name="ellipsis_v" >}}).
+1. Select **Hide sidebar**.
+
+This setting is remembered and affects all issues, tasks, epics, objectives, and key results.
+
+To show the sidebar again:
+
+- Repeat the previous steps and select **Show sidebar**.
+
 ## Change the issue type
 
 {{< history >}}
diff --git a/doc/user/tasks.md b/doc/user/tasks.md
index 64a496e3c3fee04de99333bbc49692786b4d4936..026b72e4ef81f68851a0fd2b8d71d24f2129def2 100644
--- a/doc/user/tasks.md
+++ b/doc/user/tasks.md
@@ -499,6 +499,45 @@ You can estimate and track the time you spend on a task.
 
 For more information, see [Time tracking](project/time_tracking.md).
 
+## Prevent truncating descriptions with "Read more"
+
+{{< history >}}
+
+- [Introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/181184) in GitLab 17.10.
+
+{{< /history >}}
+
+If a task description is long, GitLab displays only part of it.
+To see the whole description, you must select **Read more**.
+This truncation makes it easier to find other elements on the page without scrolling through lengthy text.
+
+To change whether descriptions are truncated:
+
+1. On a task, in the upper-right corner, select **More actions** ({{< icon name="ellipsis_v" >}}).
+1. Toggle **Truncate descriptions** according to your preference.
+
+This setting is remembered and affects all issues, tasks, epics, objectives, and key results.
+
+## Hide the right sidebar
+
+{{< history >}}
+
+- [Introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/181184) in GitLab 17.10.
+
+{{< /history >}}
+
+Task attributes are shown in a sidebar to the right of the description when space allows.
+To hide the sidebar and increase space for the description:
+
+1. On a task, in the upper-right corner, select **More actions** ({{< icon name="ellipsis_v" >}}).
+1. Select **Hide sidebar**.
+
+This setting is remembered and affects all issues, tasks, epics, objectives, and key results.
+
+To show the sidebar again:
+
+- Repeat the previous steps and select **Show sidebar**.
+
 ## View task system notes
 
 {{< history >}}
diff --git a/ee/spec/features/epic_boards/epic_boards_sidebar_spec.rb b/ee/spec/features/epic_boards/epic_boards_sidebar_spec.rb
index 3264c107d464f237f68667f884bec19c01bd3d02..00b39460c53f5c44acd304c719264f6b50540ca9 100644
--- a/ee/spec/features/epic_boards/epic_boards_sidebar_spec.rb
+++ b/ee/spec/features/epic_boards/epic_boards_sidebar_spec.rb
@@ -366,7 +366,7 @@
           find('button').click
 
           within_testid('notifications-toggle-form') do
-            subscription_button = find_by_testid('toggle-wrapper').find('button')
+            subscription_button = find_by_testid('notifications-toggle').find('button')
 
             subscription_button.click
 
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 45c1263bd520b6a5c5a57c85b5c58023e4c28b34..651c6c2c2e6cd1b49455a8637b94be93d465e3bd 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -66442,6 +66442,9 @@ msgstr ""
 msgid "WorkItem|Cancel"
 msgstr ""
 
+msgid "WorkItem|Change appearance for all issues, epics, and tasks"
+msgstr ""
+
 msgid "WorkItem|Change type"
 msgstr ""
 
@@ -66625,6 +66628,9 @@ msgstr ""
 msgid "WorkItem|Hide empty"
 msgstr ""
 
+msgid "WorkItem|Hide sidebar"
+msgstr ""
+
 msgid "WorkItem|History only"
 msgstr ""
 
@@ -66883,6 +66889,9 @@ msgstr ""
 msgid "WorkItem|Show labels"
 msgstr ""
 
+msgid "WorkItem|Show sidebar"
+msgstr ""
+
 msgid "WorkItem|Similar items"
 msgstr ""
 
@@ -67048,6 +67057,9 @@ msgstr ""
 msgid "WorkItem|Toggle details"
 msgstr ""
 
+msgid "WorkItem|Truncate descriptions"
+msgstr ""
+
 msgid "WorkItem|Turn off confidentiality"
 msgstr ""
 
diff --git a/spec/frontend/work_items/components/work_item_actions_spec.js b/spec/frontend/work_items/components/work_item_actions_spec.js
index 7cf199705925a4279f1afd9a131158b02808c438..ca1eb2f956fcb81dc44b6ce2ff8b7002f6ab321b 100644
--- a/spec/frontend/work_items/components/work_item_actions_spec.js
+++ b/spec/frontend/work_items/components/work_item_actions_spec.js
@@ -1,4 +1,4 @@
-import { GlDisclosureDropdown, GlModal, GlToggle, GlDisclosureDropdownItem } from '@gitlab/ui';
+import { GlDisclosureDropdown, GlModal, GlDisclosureDropdownItem } from '@gitlab/ui';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import namespaceWorkItemTypesQueryResponse from 'test_fixtures/graphql/work_items/namespace_work_item_types.query.graphql.json';
@@ -62,24 +62,33 @@ describe('WorkItemActions component', () => {
   const findSubmitAsSpamItem = () => wrapper.findByTestId('submit-as-spam-item');
   const findNewRelatedItemButton = () => wrapper.findByTestId('new-related-work-item');
   const findChangeTypeButton = () => wrapper.findByTestId('change-type-action');
+  const findTruncationToggle = () => wrapper.findByTestId('truncation-toggle-action');
+  const findSidebarToggle = () => wrapper.findByTestId('sidebar-toggle-action');
   const findReportAbuseModal = () => wrapper.findComponent(WorkItemAbuseModal);
   const findCreateWorkItemModal = () => wrapper.findComponent(CreateWorkItemModal);
   const findWorkItemChangeTypeModal = () => wrapper.findComponent(WorkItemChangeTypeModal);
   const findMoreDropdown = () => wrapper.findByTestId('work-item-actions-dropdown');
   const findMoreDropdownTooltip = () => getBinding(findMoreDropdown().element, 'gl-tooltip');
-  const findDropdownItems = () => wrapper.findAll('[data-testid="work-item-actions-dropdown"] > *');
+  const findDropdownItems = () =>
+    wrapper.findAll(
+      '[data-testid="work-item-actions-dropdown"] > *, [data-testid="work-item-actions-dropdown"] .gl-new-dropdown-item',
+    );
+
   const findDropdownItemsActual = () =>
     findDropdownItems().wrappers.map((x) => {
       if (x.element.tagName === 'GL-DROPDOWN-DIVIDER-STUB') {
         return { divider: true };
       }
 
+      if (x.element.tagName === 'GL-DISCLOSURE-DROPDOWN-GROUP-STUB') {
+        return { group: true };
+      }
       return {
         testId: x.attributes('data-testid'),
         text: x.text(),
       };
     });
-  const findNotificationsToggle = () => wrapper.findComponent(GlToggle);
+  const findNotificationsToggle = () => wrapper.findByTestId('notifications-toggle');
   const findMoveButton = () => wrapper.findByTestId('move-action');
   const findMoveModal = () => wrapper.findComponent(MoveWorkItemModal);
 
@@ -170,6 +179,8 @@ describe('WorkItemActions component', () => {
         canCreateRelatedItem,
         parentId,
         projectId,
+        showSidebar: true,
+        truncationEnabled: true,
       },
       mocks: {
         $toast,
@@ -273,6 +284,17 @@ describe('WorkItemActions component', () => {
         testId: 'delete-action',
         text: 'Delete issue',
       },
+      {
+        group: true,
+      },
+      {
+        testId: 'truncation-toggle-action',
+        text: '',
+      },
+      {
+        testId: 'sidebar-toggle-action',
+        text: 'Hide sidebar',
+      },
     ]);
   });
 
@@ -815,4 +837,24 @@ describe('WorkItemActions component', () => {
       expect(findMoveModal().props('visible')).toBe(false);
     });
   });
+  describe('view options', () => {
+    it('toggles truncation enabled', () => {
+      createComponent({ workItemType: 'Task' });
+
+      expect(findTruncationToggle().exists()).toBe(true);
+
+      findTruncationToggle().vm.$emit('action');
+
+      expect(wrapper.emitted('toggleTruncationEnabled')).toEqual([[]]);
+    });
+
+    it('toggles sidebar visibility', () => {
+      createComponent({ workItemType: 'Task' });
+
+      expect(findSidebarToggle().exists()).toBe(true);
+
+      findSidebarToggle().vm.$emit('action');
+      expect(wrapper.emitted('toggleSidebar')).toEqual([[]]);
+    });
+  });
 });
diff --git a/spec/frontend/work_items/components/work_item_description_rendered_spec.js b/spec/frontend/work_items/components/work_item_description_rendered_spec.js
index b902af6c6f6c74ad2d9763fca81038fa575167d7..a397c813a41ab279be3ed06ab9b548488379a7c0 100644
--- a/spec/frontend/work_items/components/work_item_description_rendered_spec.js
+++ b/spec/frontend/work_items/components/work_item_description_rendered_spec.js
@@ -32,7 +32,7 @@ describe('WorkItemDescriptionRendered', () => {
     isGroup = false,
     workItemType = 'ISSUE',
     withoutHeadingAnchors = false,
-    disableTruncation = false,
+    enableTruncation = true,
   } = {}) => {
     wrapper = shallowMountExtended(WorkItemDescriptionRendered, {
       propsData: {
@@ -42,7 +42,7 @@ describe('WorkItemDescriptionRendered', () => {
         isGroup,
         workItemType,
         withoutHeadingAnchors,
-        disableTruncation,
+        enableTruncation,
       },
       provide: {
         fullPath: 'full/path',
diff --git a/spec/frontend/work_items/components/work_item_detail_spec.js b/spec/frontend/work_items/components/work_item_detail_spec.js
index 68801489953ff21c945ae2debd50ded1b405f1ca..742a7f926c2ca7c3cf15a1a5faac3d3126a9abc2 100644
--- a/spec/frontend/work_items/components/work_item_detail_spec.js
+++ b/spec/frontend/work_items/components/work_item_detail_spec.js
@@ -135,6 +135,7 @@ describe('WorkItemDetail component', () => {
     wrapper.findComponent(WorkItemCreateBranchMergeRequestSplitButton);
   const findDesignDropzone = () => wrapper.findComponent(DesignDropzone);
   const findWorkItemDetailInfo = () => wrapper.findByTestId('info-alert');
+  const findShowSidebarButton = () => wrapper.findByTestId('work-item-show-sidebar-button');
 
   const mockDragEvent = ({ types = ['Files'], files = [], items = [] }) => {
     return { dataTransfer: { types, files, items } };
@@ -157,6 +158,7 @@ describe('WorkItemDetail component', () => {
     workspacePermissionsHandler = workspacePermissionsAllowedHandler,
     uploadDesignMutationHandler = uploadSuccessDesignMutationHandler,
     hasLinkedItemsEpicsFeature = true,
+    showSidebar = true,
   } = {}) => {
     wrapper = shallowMountExtended(WorkItemDetail, {
       apolloProvider: createMockApollo([
@@ -181,6 +183,7 @@ describe('WorkItemDetail component', () => {
         return {
           updateInProgress,
           error,
+          showSidebar,
         };
       },
       provide: {
@@ -1231,4 +1234,25 @@ describe('WorkItemDetail component', () => {
       expect(findWorkItemDetailInfo().text()).toBe('Resolved all discussions.');
     });
   });
+
+  describe('shows sidebar based on view options', () => {
+    it('when sidebar is shown based on view options', async () => {
+      createComponent({ showSidebar: true });
+      await waitForPromises();
+      expect(findShowSidebarButton().exists()).toBe(false);
+      expect(findRightSidebar().classes()).not.toContain('md:gl-hidden');
+    });
+    it('when sidebar is hidden based on view options', async () => {
+      createComponent({ showSidebar: false });
+      await waitForPromises();
+      expect(findShowSidebarButton().exists()).toBe(true);
+      expect(findRightSidebar().classes()).toContain('md:gl-hidden');
+    });
+    it('when show sidebar button is used', async () => {
+      createComponent({ showSidebar: false });
+      await waitForPromises();
+      findShowSidebarButton().vm.$emit('click');
+      expect(findRightSidebar().isVisible()).toBe(true);
+    });
+  });
 });
diff --git a/spec/frontend/work_items/components/work_item_sticky_header_spec.js b/spec/frontend/work_items/components/work_item_sticky_header_spec.js
index 34204dc6b99883741e94573c83ce6111fc2bc31c..f4e4c43f0ab9d9596c6e627e513decb8aafd481b 100644
--- a/spec/frontend/work_items/components/work_item_sticky_header_spec.js
+++ b/spec/frontend/work_items/components/work_item_sticky_header_spec.js
@@ -45,6 +45,8 @@ describe('WorkItemStickyHeader', () => {
         workItemState: STATE_OPEN,
         isGroup: false,
         parentId,
+        showSidebar: true,
+        enableTruncation: true,
       },
       provide: {
         glFeatures: {
diff --git a/spec/support/shared_examples/features/work_items/work_item_drawer_shared_examples.rb b/spec/support/shared_examples/features/work_items/work_item_drawer_shared_examples.rb
index ab58aadd58545f319f5dc83c1903e8a6fd83e70e..8f0937c86adbc5622a7615798a35691c77e2c96a 100644
--- a/spec/support/shared_examples/features/work_items/work_item_drawer_shared_examples.rb
+++ b/spec/support/shared_examples/features/work_items/work_item_drawer_shared_examples.rb
@@ -80,7 +80,7 @@
 
     it 'shows toggle as on then as off as user toggles to subscribe and unsubscribe', :aggregate_failures do
       within_testid('notifications-toggle-form') do
-        subscription_button = find('[data-testid="toggle-wrapper"] button')
+        subscription_button = find('[data-testid="notifications-toggle"] button')
 
         expect(page).not_to have_css("button.is-checked")