Limit the markdown toolbar for tight spaces

h/static/styles/markdown-editor.scss

@@ -11,13 +11,9 @@
}

.markdown-tools {
  border-top: .1em solid #D3D3D3;
  border-left: .1em solid #D3D3D3;
  border-right: .1em solid #D3D3D3;
  border-radius: .15em .15em 0 0;
  width: 100%;
  margin-bottom: -.1em;
  padding: .7em .7em .7em .5em;
  max-height: 1.4em;
  overflow: hidden;
  @include user-select(none);

  &.disable {
@@ -27,7 +23,14 @@
    }
  }

  .markdown-tools-button {padding: .4em;}
  .markdown-tools-button {
    padding: .4em
  }

  .markdown-preview-toggle {
    float: right;
    margin: 0 .4em;
  }

  .markdown-tools-button, .markdown-tools-toggle, .icon-markdown {
    color: $gray;
@@ -37,7 +40,4 @@
    }
  }

  .markdown-preview-toggle {
    float: right;
  }
}

h/templates/markdown.html

@@ -1,21 +1,21 @@
<div ng-hide="readonly" class="markdown-tools" ng-class="preview && 'disable'">
	<i class="icon-bold markdown-tools-button" ng-click="insertBold()" title="Embolden text" />
	<i class="icon-italic markdown-tools-button" ng-click="insertItalic()" title="Italicize text" />
	<i class="icon-quote markdown-tools-button" ng-click="insertQuote()" title="Quote text" />
	<i class="icon-link markdown-tools-button" ng-click="insertLink()" title="Insert link" />
	<i class="icon-image markdown-tools-button" ng-click="insertIMG()" title="Insert image" />
	<i class="icon-math markdown-tools-button" ng-click="insertMath()" title="Insert mathematical notation (LaTex is supported)" />
	<i class="icon-numlist markdown-tools-button" ng-click="insertNumList()" title="Insert numbered list" />
	<i class="icon-ulist markdown-tools-button" ng-click="insertList()" title="Insert list" />
	<i class="icon-code markdown-tools-button" ng-click="insertCode()" title="Insert code" />
	<span class="markdown-preview-toggle">
		<a class="icon-markdown" href="https://help.github.com/articles/markdown-basics" title="Parsed as Markdown" target="_blank" />
		<a href="" class="markdown-tools-toggle" ng-click="togglePreview()" ng-show="!preview">Preview</a>
		<a href="" class="markdown-tools-toggle" ng-click="togglePreview()" ng-show="preview">Write</a>
	</span>
  <span class="markdown-preview-toggle">
    <a class="icon-markdown" href="https://help.github.com/articles/markdown-basics" title="Parsed as Markdown" target="_blank" />
    <a href="" class="markdown-tools-toggle" ng-click="togglePreview()" ng-show="!preview">Preview</a>
    <a href="" class="markdown-tools-toggle" ng-click="togglePreview()" ng-show="preview">Write</a>
  </span>
  <i class="icon-bold markdown-tools-button" ng-click="insertBold()" title="Embolden text" />
  <i class="icon-italic markdown-tools-button" ng-click="insertItalic()" title="Italicize text" />
  <i class="icon-quote markdown-tools-button" ng-click="insertQuote()" title="Quote text" />
  <i class="icon-link markdown-tools-button" ng-click="insertLink()" title="Insert link" />
  <i class="icon-image markdown-tools-button" ng-click="insertIMG()" title="Insert image" />
  <i class="icon-math markdown-tools-button" ng-click="insertMath()" title="Insert mathematical notation (LaTex is supported)" />
  <i class="icon-numlist markdown-tools-button" ng-click="insertNumList()" title="Insert numbered list" />
  <i class="icon-ulist markdown-tools-button" ng-click="insertList()" title="Insert list" />
  <i class="icon-code markdown-tools-button" ng-click="insertCode()" title="Insert code" />
</div>
<textarea class="form-input form-textarea js-markdown-input"
		  ng-hide="readonly || preview"
          ng-hide="readonly || preview"
          ng-click="$event.stopPropagation()"
          ng-required="required" />
<div class="styled-text js-markdown-preview" ng-class="preview && 'markdown-preview'" ng-dblclick="togglePreview()" ng-bind-html="rendered" ng-show="readonly || preview" />