Output format on section pages - Image paths broken

Some of our website pages are loaded by our mobile app and when this is the case, I don’t want to show the header or footer of our pages. I thought the best way to achieve this would be to use a new output format called “APP” and render a different template.

As an aside:- it doesn’t seem possible to choose a different base template from a template? Just have to override blocks?

My config looks as so:

[outputFormats]
  [outputFormats.AppFormat]
    name = "app"
    isPlainText = false
    mediaType = "text/html"
    isHTML = true
    permalinkable = true
    path = "app"

[outputs]
  section = ["HTML", "APP"]
  page = ["HTML", "APP"]

This is working as expected for pages. An app directory is created and a copy of the page and images are in there so for a blog post for example would be /app/blog/post1 and in the post1 directory would be an index.html and any images that were included in the content.

Section / List pages (is there a difference between section and list?) however behave differently. The index.html page is in an app directory inside the section directory. So the URL for blog section page is /blog/app but local images to that page are not there, they are in /app/blog/image1.jpg breaking my image paths.

What’s going on? Why isn’t the app index.html also with the images?

I tried the pre-configured AMP to see if I had configured the APP output format wrong and it has the same behaviour.

Many thanks

tldr;

Images and pages when using an output format path get generated in:
<output-format-path>/section/page and <output-format-path>/section/page/image.jpg

Section pages output to section/<output-format-path>.

This is confusing and also breaks relative image paths.