diff --git a/src/views/studio/studio-description.jsx b/src/views/studio/studio-description.jsx
index 3f3765302..1fb0e5e39 100644
--- a/src/views/studio/studio-description.jsx
+++ b/src/views/studio/studio-description.jsx
@@ -12,6 +12,7 @@ import {
} from '../../redux/studio-mutations';
import ValidationMessage from '../../components/forms/validation-message.jsx';
+import decorateText from '../../lib/decorate-text.jsx';
const errorToMessageId = error => {
switch (error) {
@@ -32,18 +33,30 @@ const StudioDescription = ({
});
return (
{canEditInfo && !isFetching &&
diff --git a/src/views/studio/studio-title.jsx b/src/views/studio/studio-title.jsx
index 3d7f6f2a2..f08714a16 100644
--- a/src/views/studio/studio-title.jsx
+++ b/src/views/studio/studio-title.jsx
@@ -29,18 +29,24 @@ const StudioTitle = ({
});
return (
);
};
diff --git a/src/views/studio/studio.scss b/src/views/studio/studio.scss
index 1227f9f2c..e384948b1 100644
--- a/src/views/studio/studio.scss
+++ b/src/views/studio/studio.scss
@@ -48,18 +48,6 @@ $radius: 8px;
grid-template-columns: minmax(0, 1fr);
gap: 20px;
- .studio-title, .studio-description {
- background: transparent;
- margin: 0 -8px; /* Outset the border horizontally */
- padding: 5px 8px;
- border: 2px dashed $ui-blue-25percent;
- border-radius: $radius;
- resize: none;
- width: 300px;
-
- &:disabled { border-color: transparent; }
- }
-
.studio-info-section {
position: relative;
.validation-message {
@@ -72,12 +60,35 @@ $radius: 8px;
font-weight: 700;
}
- .studio-title:disabled {
- padding: 0;
- margin: 0;
- }
- .studio-description:disabled {
+ .studio-description {
background: $ui-blue-10percent;
+ padding: 15px 20px;
+ border-color: transparent;
+ border-radius: $radius;
+ word-wrap: break-word;
+ white-space: pre-wrap;
+ width: 300px;
+ box-sizing: border-box;
+ height: 24rem;
+ overflow-y: scroll;
+ }
+
+ /* Overrides for when title and description are editable textareas */
+ textarea.studio-title, textarea.studio-description {
+ background: transparent;
+ padding: 5px 8px;
+ border: 2px dashed $ui-blue-25percent;
+ border-radius: $radius;
+ resize: none;
+ width: 300px;
+ box-sizing: border-box;
+ }
+
+ .studio-image {
+ width: 300px;
+ height: 225px;
+ object-fit: cover;
+ border-radius: 8px;
}
.studio-follow-button {