diff --git a/src/components/common/TextEditor/Editor.css b/src/components/common/TextEditor/Editor.css index 223dbde3..a48c4638 100644 --- a/src/components/common/TextEditor/Editor.css +++ b/src/components/common/TextEditor/Editor.css @@ -1,6 +1,6 @@ .editor-wrapper { max-width: 800px; - margin: 20px auto; + margin: 1px auto; background: #fff; overflow: hidden; @@ -69,40 +69,64 @@ cursor: pointer; display: inline-block; float: left; - height: 24px; + font-size: 15px; padding: 2px 2px; width: 28px; } +.ql-toolbar.ql-snow{ + padding: 4px; +} + + @media (max-width: 768px) { .ql-toolbar.ql-snow .ql-formats { margin-right: 1px; + align-items: center; } } -/* for small editor */ -/* Editor height and text */ -.compact-editor .ql-editor { - min-height: 80px; /* Reduce editor height */ - font-size: 0.85rem; /* Smaller font */ - padding: 6px 10px; +.ql-snow.ql-toolbar button, +.ql-snow .ql-toolbar button { + background: none; + border: none; + cursor: pointer; + display: inline-block; + height: 18px; + padding: 2px 2px; + width: 22px; + font-size: 14px; + /* REMOVE THIS to fix side-alignment */ + /* float: left; */ + vertical-align: middle; } -/* Toolbar size */ -.compact-editor .ql-toolbar { - padding: 5px 8px; - font-size: 0.85rem; +.ql-snow .ql-picker-label { + font-size: 10px; /* Smaller text */ + padding: 0 6px; /* Horizontal padding */ + height: 20px; /* Height of the label */ + line-height: 20px; /* Match height to vertically center single-line text */ + background-color: #eee; + border-radius: 0px; + cursor: pointer; + color: #333; + text-align: center; + width: 100%; + + display: flex; /* Enable flexbox */ + align-items: center; /* Vertical centering */ + justify-content: center; /* Horizontal centering */ } -/* Optional: smaller buttons & spacing */ -.compact-editor .ql-toolbar button { - height: 24px; - width: 24px; - padding: 2px; -} -.compact-editor .ql-toolbar .ql-formats { - margin-right: 6px; +/* Remove custom upward-opening styles */ +.ql-toolbar .ql-picker.ql-header .ql-picker-options { + top: 100%; /* Position it below the label */ + bottom: auto; /* Cancel the upward positioning */ + margin-top: 5px; /* Optional spacing */ } +.ql-editor { + padding: 4px 15px; +} \ No newline at end of file