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

[chriswaterguy]

I like having the file path fully visible at the top of my screen in the Android app.

1. A snippet is needed to display it at all since 1.11. See:
   Make file path visible (mobile) - #4 by ariehen
   Edit: the file path can be displayed as of 1.11.6 but only in a cramped space. So the snippets shared in that thread are still relevant.)

2. I’ve made my folder names as short as I practically can. E.g. my notes for posting or sharing are in “C·/” rather than “Content/”.
   But there are limits to this.

3. I need to shrink the font of file path. (I don’t mind it being small and having to peer closely at my screen when I’m not actually entering text.)

I’ve had some success using Perplexity Pro to code a snippet. It works for the font, but the slashes are still large – anyone know how to shrink them?

/* SMALLER BREADCRUMBS: Make title-bar breadcrumb/path more compact */
/* File title */
.view-header-title {
  font-size: 9px;
  line-height: 1;
}

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

Here’s the result:

If I had more time and patience I’d try developer mode in the Windows app to find the CSS classes or whatever the relevant code is. (I’m not proficient in CSS , as you can tell.)

For now, this could be prettier but it works tolerably well.

(If I can fix this, I’ll post the full snippet, which also shrinks the folder view and other UI elements.)

Edit: see my full updated snippet, which includes ariehen’s fix, in post 4 below.

[ariehen]

For the path separators, the slash (/) sizes, this should do it:

/* root "/" if it's there */
.is-phone .view-header-title-parent:before {
  font-size: 0.6em;
}

/* the rest of the "/" separators */
.is-phone .view-header-breadcrumb-separator {
  font-size: 0.6em;
}

[chriswaterguy]

Wonderful, thanks! The first line isn’t necessary on my phone, so I’m just using this:

@ariehen

/* the rest of the "/" separators */
.is-phone .view-header-breadcrumb-separator {
  font-size: 0.6em;
}

[chriswaterguy]

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; 
}