Small text for file path in mobile (and how to shrink the slashes?)

Devs: Theme Design & Custom CSS
4

So here’s my “UI elements sizing” snippet, with some improvements. It shrinks the text in search, file explorer, tags pane and backlinks, so that more text is visible on the screen.

I would also like to:

  • Reduce the Tags pane line spacing further, without cutting off the letters,
  • Shrink the Checklist plugin’s “Todo List” pane.
    … but no progress so far.

I’ve shrink the text a lot, but you might prefer to make milder changes to the sizes:

/* File title */
.workspace-leaf.mod-active .view-header-title-container .view-header-title {
  font-size: 9px;
  line-height: 1;
}

/* Breadcrumb path text + icon - slightly smaller than file title. */
.view-header-breadcrumb,
.view-header-breadcrumb .breadcrumb,
.view-header-breadcrumb .collapse-icon {
  font-size: 8px;
  line-height: 1;
}

/* The "/" separators on phone */
.is-phone .view-header-breadcrumb-separator {
  font-size: 0.5em;
}


/* SMALLER FILE EXPLORER TEXT */
.nav-file-title,
.nav-folder-title {
  font-size: 11px;   /* adjust to taste */
  line-height: 1.1;
} 

/* SMALLER SEARCH RESULTS */
/* File title in results */
.search-result-file-title {
  font-size: 11px;
  line-height: 1;
}

/* Matched lines under each file */
.search-result-file-matches,
.search-result-file-match {
  font-size: 9px;
  line-height: 1.05;
  padding-top: 1px;
  padding-bottom: 1px;
}


/* SMALLER SIDEBAR ICONS AND PADDING */
.nav-folder-title,
.nav-file-title {
  padding: 3px 4px; /* only the first number seems to do anything */
}


/* TAGS PANE SHRINK - targets core classes */
/* Tag counts/numbers */
.tag-pane-tag-count,
.nav-file-tag-count {
  font-size: 9px !important;
}
/* Mobile */
.is-mobile .tag-pane-tag,
.is-mobile .nav-file-tag {
  font-size: 8px !important;
  line-height: 1 !important;  /* If any smaller than 1, the tops and bottoms of the letters get cut off. */
}

There was other code suggested by Perplexity Pro that seems to not do anything. E.g.:

/* If you have inline titles disabled and only see the top bar title, this extra selector sometimes helps: (Doesn't seem to make a difference even if inline titles are disabled.) */
.view-header-title-container .view-header-title-text {
  font-size: 8px;
  line-height: 1;
}


/* Hide unused top ribbon icons on mobile - seems to do nothing */
.is-mobile .app-ribbon {
  padding: 4px; 
}

/* Reduced vertical space in sidebar bottom buttons  */
.mobile-navbar {
  padding: 16px;
}

/* Left Sidebar Padding - seems already at a minimum by default. */

.nav-folder,
.nav-file {
  padding-left: 0px; 
}