fix on-edit.scss

src/client/js/components/PageEditor/GridEditModal.jsx

@@ -128,19 +128,19 @@ export default class GridEditModal extends React.PureComponent {
                 <label>
                   <i className="icon-screen-desktop"></i> Desktop
                 </label>
-                {/* desktop */}
+                <div className="border"></div>
               </div>
-              <div className="col-4 bg-light">
+              <div className="col-3 bg-light">
                 <label>
                   <i className="icon-screen-tablet"></i> Tablet
                 </label>
-                {/* tablet */}
+                <div className="border"></div>
               </div>
-              <div className="col-2 bg-primary">
+              <div className="col-3 bg-primary">
                 <label>
                   <i className="icon-screen-smartphone"></i> Mobile
                 </label>
-                {/* mobile */}
+                <div className="border"></div>
               </div>
             </div>
           </div>

src/client/styles/scss/_on-edit.scss

@@ -312,22 +312,6 @@ body.on-edit {
 /*
  Grid Edit Modal
 */
-.device-container {
-  height: 135px;
-}
-
-// [border-color:TODO support dark mode by GW-3037]
-.grid-bg-col {
-  border-right: 5px solid white;
-  border-left: 5px solid white;
-}
-
-.grid-editable-row {
-  top: 0;
-}
-
-.grid-editable-col {
-  border-right: 5px solid white;
-  border-left: 5px solid white;
-  opacity: 0.5;
+.border {
+  height: 200px;
 }