From c00ea5639bad3c7cf425bb983127330e0e3d4e07 Mon Sep 17 00:00:00 2001
From: pollfly <75068813+pollfly@users.noreply.github.com>
Date: Tue, 25 Oct 2022 13:21:44 +0300
Subject: [PATCH] Design fixes (#355)

---
 docusaurus.config.js |  1 +
 src/css/custom.css   | 26 ++++++++++++++++++--------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/docusaurus.config.js b/docusaurus.config.js
index e7b4aa8e..81d6d4b8 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -183,6 +183,7 @@ module.exports = {
         docs: {
           sidebarPath: require.resolve('./sidebars.js'),
           // Please change this to your repo.
+          breadcrumbs: false,
           editUrl:
             'https://github.com/allegroai/clearml-docs/edit/main/',
         },
diff --git a/src/css/custom.css b/src/css/custom.css
index 3fd81401..96ac97d8 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -544,16 +544,16 @@ html[data-theme="dark"] .markdown table td {
    filter: brightness(0.5);
 }
 
-.size-sm {
+.icon.size-sm {
   width: 16px;
   height: 16px;
 }
-.size-md {
+.icon.size-md {
   width: 24px;
   height: 24px;
 }
-.size-lg  {
-  width: 32x;
+.icon.size-lg  {
+  width: 32px;
   height: 32px;
 }
 html[data-theme="light"] .icon {
@@ -575,12 +575,21 @@ html[data-theme="light"] .icon {
 /* expansion panel */
 .cml-expansion-panel {
   position: relative;
-  padding: 0;
+  padding: 0 0 0 40px !important;
   background-color: var(--ifm-toc-background-color);
-  border-left: 4px solid transparent;
+  /*border-left: 4px solid transparent;*/
   border-radius: 4px;
   transition: border-left 0.4s ease;
+  border: none !important;
+
 }
+
+div[class^="collapsibleContent"] {
+  margin: 0 !important;
+  padding: 0 !important;
+  border-top: none !important;
+}
+
 .cml-expansion-panel-summary {
   outline: none;
   color: #8f9dc9;
@@ -599,11 +608,12 @@ html[data-theme="light"] .icon {
   height: 24px;
   line-height: 16px;
   position: absolute;
-  left: 8px;
-  top: 8px;
+  left: -40px !important;
+  top: 4px !important;
   background-color: var(--ifm-toc-background-color);
   background-repeat: no-repeat;
   background-position: center;
+  transform: rotate(0deg) !important;
 }
 .cml-expansion-panel-summary:after {
   content:"";