refactor: add default css variable for editor content area

resources/css/common.css

@@ -4,6 +4,7 @@
   --ls-page-text-size: 1em;
   --ls-page-title-size: 36px;
   --ls-font-family: 'Inter';
+  --ls-main-content-max-with: 680px;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -975,10 +976,6 @@ button.context-menu-option {
   margin-bottom: .5rem;
 }
 
-.block-content img {
-  width: 100%;
-}
-
 a.login {
   color: #444;
   color: var(--ls-link-text-color);

src/main/frontend/components/block.css

@@ -8,7 +8,7 @@
   cursor: text;
 
   img {
-    width: 100%;
+    max-width: 100%;
   }
 }
 

src/main/frontend/components/sidebar.css

@@ -44,13 +44,14 @@
   position: relative;
   flex: 1;
   display: flex;
+  width: 100%;
   align-items: center;
   justify-content: center;
 }
 
 .cp__sidebar-main-content {
   padding: 3rem 1.5rem;
-  max-width: 640px;
+  max-width: var(--ls-main-content-max-with);
   flex: 1;
 }
 
@@ -88,10 +89,12 @@
     @apply flex flex-row mb-2;
     margin: -15px;
     margin-bottom: 0;
+    overflow: auto;
 
     &-btn {
       display: block;
       padding: 10px 5px;
+      white-space: nowrap;
     }
   }
 
@@ -142,12 +145,6 @@
   }
 }
 
-@media (max-width: 640px) {
-  .cp__sidebar-main-content {
-    max-width: 100vw;
-  }
-}
-
 .cp__sidebar-main-content[data-is-full-width="true"] {
   max-width: 100vw;
 }