// Container holding the suggestions.
.tt-dropdown-menu {
  border: none;
  border-radius: @main-border-radius;
  padding: 0;
  background-color: @white;
  // Match the position of the search header containing the typeahead input.
  // TODO: Try to position relative to the header.
  margin-top: 3px;
  margin-left: -34px;
}

.tt-suggestion.tt-cursor {
  text-decoration: none;
  background-color: @blue-lighter;
}


.typeahead-suggestion {
  // Match the width of the search header containing the typeahead input.
  // TODO: Try to get rid of this magic number.
  width: 362px;

  &.event {
    line-height: 1;
  }

  a {
    display: block;
    padding: 8px 16px;
    color: @text-color;
    &:hover {
      text-decoration: none;
    }

    .icon {
      float: left;
      margin: 2px 16px 0 0;
      color: @gray;
    }

    .color-ball {
      margin-top: 13px;
    }
  }

  p {
    color: @text-color;
    padding: 8px 16px;
    margin: 0;
  }
}

// Container holding the suggestions.
.tt-dropdown-menu {
  border: none;
  border-radius: @main-border-radius;
  padding: 0;
  background-color: @white;
  // Match the position of the search header containing the typeahead input.
  margin-top: 3px;
  margin-left: -@service-sidebar-header-closed-width;
}

.tt-suggestion.tt-cursor {
  text-decoration: none;
  background-color: @blue-lighter;
}


.typeahead-suggestion {
  width: @service-sidebar-header-open-width;

  &.event {
    line-height: 1;
  }

  a {
    display: block;
    padding: 4px 16px;
    color: @text-color;
    &:hover {
      text-decoration: none;
    }

    .icon {
      float: left;
      margin: 2px 16px 0 0;
      color: @gray;
    }

    .color-ball {
      margin-top: 13px;
    }
  }

  p {
    color: @text-color;
    padding: 4px 16px;
    margin: 0;
  }
}

Make search suggestions more compact
Make search suggestions more compact

Also replaces couple of hardcoded values with less variables.
Closes #47.
