diff --git a/client/homebrew/editor/snippetbar/snippets/snippets.js b/client/homebrew/editor/snippetbar/snippets/snippets.js index f72817c7a..fca5a539b 100644 --- a/client/homebrew/editor/snippetbar/snippets/snippets.js +++ b/client/homebrew/editor/snippetbar/snippets/snippets.js @@ -27,18 +27,34 @@ module.exports = [ }, { name : 'Vertical Spacing', - icon : 'fas fa-times-circle', - gen : '' + icon : 'fas fa-arrows-alt-v', + gen : '\n::::\n' + }, + { + name : 'Horizontal Spacing', + icon : 'fas fa-arrows-alt-h', + gen : ' {{width="100px"}} ' }, { name : 'Wide Block', - icon : 'fas fa-times-circle', - gen : '' + icon : 'fas fa-window-maximize', + gen : dedent`\n + {{wide + Everything in here will be extra wide. Tables, text, everything! + Beware though, CSS columns can behave a bit weird sometimes. You may + have to rely on the automatic column-break rather than \`\column\` if + you mix columns and wide blocks on the same page. + }} + \n` }, { name : 'Image', - icon : 'fas fa-times-circle', - gen : '' + icon : 'fas fa-image', + gen : dedent` + + Credit: Kyounghwan Kim` }, { name : 'Background Image', diff --git a/client/homebrew/phbStyle/phb.style.less b/client/homebrew/phbStyle/phb.style.less index a5c66b7f4..ded9462e1 100644 --- a/client/homebrew/phbStyle/phb.style.less +++ b/client/homebrew/phbStyle/phb.style.less @@ -528,8 +528,8 @@ body { .block { break-inside : avoid; } - .inline-block { - display : block; + .inline { + display : inline-block; } div { column-gap : 0.5cm; //Default spacing if a div uses multicolumns