diff --git a/app/client/src/components/ads/EditableText.tsx b/app/client/src/components/ads/EditableText.tsx
index 61265ea808..eadbefd189 100644
--- a/app/client/src/components/ads/EditableText.tsx
+++ b/app/client/src/components/ads/EditableText.tsx
@@ -45,10 +45,18 @@ export type EditableTextProps = CommonComponentProps & {
   underline?: boolean;
 };
 
-const EditableTextWrapper = styled.div<{
+export const EditableTextWrapper = styled.div<{
   filled: boolean;
 }>`
-  width: ${(props) => (!props.filled ? "234px" : "100%")};
+  ${(props) =>
+    !props.filled
+      ? `
+    width: 243px;
+  `
+      : `
+    width: 100%;
+    flex: 1;
+  `}
   .error-message {
     margin-left: ${(props) => props.theme.spaces[5]}px;
     color: ${(props) => props.theme.colors.danger.main};
diff --git a/app/client/src/pages/AppViewer/viewer/AppViewerHeader.tsx b/app/client/src/pages/AppViewer/viewer/AppViewerHeader.tsx
index 41f6de65fc..40accbde36 100644
--- a/app/client/src/pages/AppViewer/viewer/AppViewerHeader.tsx
+++ b/app/client/src/pages/AppViewer/viewer/AppViewerHeader.tsx
@@ -46,7 +46,6 @@ const HeaderWrapper = styled(StyledHeader)<{ hasPages: boolean }>`
   color: white;
   flex-direction: column;
   .${Classes.TEXT} {
-    max-width: 194px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -74,6 +73,10 @@ const HeaderWrapper = styled(StyledHeader)<{ hasPages: boolean }>`
     width: 24px;
     height: 24px;
   }
+
+  & .current-app-name {
+    overflow: auto;
+  }
 `;
 
 const HeaderRow = styled.div<{ justify: string }>`
diff --git a/app/client/src/pages/Editor/EditableAppName.tsx b/app/client/src/pages/Editor/EditableAppName.tsx
index 8fa04d5a51..8b38549510 100644
--- a/app/client/src/pages/Editor/EditableAppName.tsx
+++ b/app/client/src/pages/Editor/EditableAppName.tsx
@@ -35,6 +35,8 @@ const Container = styled.div`
   &&&& .${Classes.EDITABLE_TEXT_CONTENT} {
     min-width: 0;
   }
+  flex: 1;
+  overflow: auto;
 `;
 
 export default function EditableTextWrapper(props: EditableTextWrapperProps) {
diff --git a/app/client/src/pages/Editor/EditorHeader.tsx b/app/client/src/pages/Editor/EditorHeader.tsx
index 0320c17dbf..142d409b52 100644
--- a/app/client/src/pages/Editor/EditorHeader.tsx
+++ b/app/client/src/pages/Editor/EditorHeader.tsx
@@ -50,6 +50,7 @@ import OnboardingIndicator from "components/editorComponents/Onboarding/Indicato
 import { getThemeDetails, ThemeMode } from "selectors/themeSelectors";
 
 const HeaderWrapper = styled(StyledHeader)`
+  width: 100%;
   padding-right: 0;
   padding-left: ${(props) => props.theme.spaces[7]}px;
   background-color: ${(props) => props.theme.colors.header.background};
@@ -83,6 +84,7 @@ const HeaderWrapper = styled(StyledHeader)`
 const HeaderSection = styled.div`
   display: flex;
   flex: 1;
+  overflow: auto;
   align-items: center;
   :nth-child(1) {
     justify-content: flex-start;
@@ -211,7 +213,7 @@ export const EditorHeader = (props: EditorHeaderProps) => {
                 defaultValue={currentApplication.name || ""}
                 editInteractionKind={EditInteractionKind.SINGLE}
                 className="t--application-name editable-application-name"
-                fill={false}
+                fill={true}
                 savingState={
                   isSavingName ? SavingState.STARTED : SavingState.NOT_STARTED
                 }