Embed chart mobile UI fixes

eea · Jul 22, 2021 · c489f5a · c489f5a
1 parent fec6409
commit c489f5a
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/src/EmbedChartBlock/Edit.jsx b/src/EmbedChartBlock/Edit.jsx
@@ -97,8 +97,8 @@ class EmbedChartBlockEdit extends Component {
           </SidebarPortal>
 
           <UiForm>
-            <Segment.Group horizontal>
-              <Segment className="text-segment">
+            <Segment.Group horizontal className="mobile-col">
+              <Segment className="text-segment mobile-full">
                 <div
                   style={{ minWidth: '73px' }}
                   ref={this.textEditorSegmentNode}

diff --git a/src/EmbedChartBlock/View.jsx b/src/EmbedChartBlock/View.jsx
@@ -44,13 +44,13 @@ const EmbedChartView = ({
     <div className="chartWrapperView">
       {data.block_title ? <h5>{data.block_title}</h5> : ''}
       <div className="block-inner-wrapper">
-        <div className="element-grid">
+        <div className="element-grid mobile-col">
           {hasText && isNewEditor ? (
             <div
-              className={`${layout_type}-${grid.text_column[layout_type]} text-segment`}
+              className={`${layout_type}-${grid.text_column[layout_type]} text-segment mobile-full`}
             >
               <div
-                className="block-text-content"
+                className="block-text-content mobile-full"
                 style={{ padding: '1rem', marginTop: '.5rem' }}
               >
                 {serializeNodes(data.text.blocks || [])}

diff --git a/src/EmbedChartBlock/styles.css b/src/EmbedChartBlock/styles.css
@@ -2,3 +2,13 @@
   max-width: 40%;
   word-break: break-word;
 }
+
+@media screen and (max-width: 600px) {
+  .mobile-col {
+    flex-direction: column !important;
+  }
+
+  .mobile-full {
+    min-width: 100% !important;
+  }
+}