-
-
-
+
+ }
+ bs5={
+
+ }
+ />
{children || (
-
+
)}
-
+
)
}
diff --git a/services/web/frontend/stylesheets/app/editor/error-boundary.less b/services/web/frontend/stylesheets/app/editor/error-boundary.less
index 230a2081a2..24de74b92b 100644
--- a/services/web/frontend/stylesheets/app/editor/error-boundary.less
+++ b/services/web/frontend/stylesheets/app/editor/error-boundary.less
@@ -11,30 +11,16 @@
display: flex;
flex-direction: column;
gap: 16px;
- height: 211px;
- justify-content: center;
- margin: auto;
- padding: 0px;
- width: 266px;
-}
+ position: absolute;
+ top: 40%;
+ left: 50%;
+ transform: translate(-50%, -50%);
-.error-message-container {
- align-items: center;
- color: @neutral-90;
- display: flex;
- flex-direction: column;
- gap: 4px;
- height: 56px;
- padding: 0px;
- width: 266px;
-}
-
-.icon-error-boundary-container {
- align-items: center;
- background: #ffffff;
- border-radius: 999px;
- display: grid;
- height: 88px;
- padding: 24px;
- width: 88px;
+ .error-message {
+ align-items: center;
+ color: @neutral-90;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ }
}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
index af663098f3..9b4c5b4d9e 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
@@ -28,3 +28,4 @@
@import 'link';
@import 'pagination';
@import 'loading-spinner';
+@import 'error-boundary';
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/error-boundary.scss b/services/web/frontend/stylesheets/bootstrap-5/components/error-boundary.scss
new file mode 100644
index 0000000000..e0d011a9ab
--- /dev/null
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/error-boundary.scss
@@ -0,0 +1,22 @@
+.error-boundary-alert {
+ padding: var(--spacing-05);
+}
+
+.error-boundary-container {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-06);
+ position: absolute;
+ top: 40%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+
+ .error-message {
+ align-items: center;
+ color: var(--content-primary);
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-02);
+ }
+}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide.scss
index 9f79676776..697156c8cf 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide.scss
@@ -26,6 +26,19 @@
}
}
+.global-alerts {
+ height: 0;
+ margin-top: var(--spacing-01);
+ text-align: center;
+
+ [role='alert'] {
+ text-align: left;
+ min-width: 400px;
+ position: relative;
+ z-index: 20;
+ }
+}
+
.ide-react-editor-sidebar {
background-color: var(--file-tree-bg);
height: 100%;
@@ -57,16 +70,6 @@
color: var(--neutral-20);
}
-.ide-react-file-tree-panel {
- display: flex;
- flex-direction: column;
-
- // Prevent the file tree expanding beyond the boundary of the panel
- .file-tree {
- width: 100%;
- }
-}
-
.ide-react-editor-panel {
display: flex;
flex-direction: column;
@@ -88,6 +91,37 @@
}
}
+.modal.lock-editor-modal {
+ display: flex !important;
+ background-color: rgba($bg-dark-primary, 0.3);
+ overflow-y: hidden;
+ pointer-events: none;
+
+ .modal-dialog {
+ top: 25px;
+ }
+}
+
+.out-of-sync-modal {
+ .text-preview {
+ margin-top: var(--spacing-05);
+
+ .scroll-container {
+ @include body-sm;
+
+ max-height: 360px;
+ width: 100%;
+ background-color: var(--bg-light-primary);
+ overflow: auto;
+ border: 1px solid var(--border-primary-dark);
+ padding: var(--spacing-04) var(--spacing-05);
+ text-align: left;
+ white-space: pre;
+ font-family: monospace;
+ }
+ }
+}
+
.horizontal-resize-handle {
width: 7px !important;
height: 100%;