Page Tree Search results difficult to read when using a custom theme

Issue

• When searching in the page tree, the results are formatted in such a way that they are difficult to read and select the correct item from them.
• This happens when there are several levels of child pages in the tree and a custom theme is applied, which is generated with the Liferay theme generator. (Note here: there is no additional custom code added yet, we used a sample theme generated with yo liferay-theme)
• When the theme is deployed and set as default, it applies a whitish/gray layer on the page tree search results, and also they are presented somehow overlapping each other. (See the attached pictures about the page tree and the search results below)
  
     

Environment

• Liferay DXP 7.3
• Liferay DXP 7.4

Resolution

1. Change the default theme in your portal to classic. This is to deactivate the custom theme we are about to modify.
2. Navigate to the folder of that custom theme, where it was generated. (See the attached picture below)
   
   
3. Navigate to /src/css and edit _custom.scss
4. Add the following property:
   

   .breadcrumb {background-color: transparent; display: flex; flex-direction: column;}

5. Save the changes and rebuild the theme. (gulp build command from the theme's folder)
6. Redeploy the modified theme OR Replace the old theme in $LIFERAY_HOME/osgi/war folder with the modified theme. (Running gulp deploy from the folder of the theme OR the generated WAR file of the theme could be found in $THEME_FOLDER/dist)
7. Apply the theme in the portal and test the page tree search. (See attached picture below)
   
   

Additional Information

• Liferay Theme Generator
• Changing your Site's appearance
• Installing theme generator and creating a theme